How do I get normal attributes of an element when selected with jQuery?

Question

I have a textarea which I select using jQuery, and I want to find the position of the cursor within it. I've found that in normal JavaScript you can do it with .selectionStart, but doing $("#maintext").selectionStart results in undefined.

How can I do it?

http://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea — Bing, Jun 19 '11 at 20:41
@Bing: That's not addressing his problem, because he wants to combine it with a jQuery object. — pimvdb, Jun 19 '11 at 20:42
@pimvdb, sure but there are mentions of jQuery there too. Figured it'd be a good reference to this question.. — Bing, Jun 19 '11 at 20:46

score 5 · Accepted Answer · answered Jun 19 '11 at 20:39

5

selectionStart is native DOM property so try this:

var selStart = $('#maintext').get(0).selectionStart;

The reason for this happening is that $('#maintext') returns an array of jQuery wrapped DOM objects and in order to invoke a native method you need to get the underlying element.

answered Jun 19 '11 at 20:39

Darin Dimitrov

1,023,142
271
3,287
2,928

I would rather use `.get(0)`, because it's cleaner and provides negative index support. – pimvdb Jun 19 '11 at 20:40
Oh, okay. What does the [0] stand for? The first selected element? – kettlepot Jun 19 '11 at 20:40
Probably worth adding that the reason `undefined` was returned is because there was no *specific* DOM element specified by the jQuery selector. So, presumably, `$('#maintext:first').selectionStart;` would've worked, too. @Gabriele, the `[0]` specifies the first element of the array returned by the selector. – David Thomas Jun 19 '11 at 20:41
@Gabriele Cirulli, yes, but because you are using an id selector there should always be only one. – Darin Dimitrov Jun 19 '11 at 20:41
`selectionStart` and `selectionEnd` properties are not supported in IE < 9. – Tim Down Jun 20 '11 at 21:55

score 3 · Answer 2 · answered Jun 19 '11 at 20:41

3

In that situation there might be a case for simply doing:

document.getElementById("maintext").selectionStart

and not have the overhead of creating a new jQuery object.

answered Jun 19 '11 at 20:41

Andy Hume

40,474
10
47
58

Thanks, but I'd like to keep all the syntax based on jQuery for simplicity and also because speed isn't the main concern. – kettlepot Jun 19 '11 at 21:09
Gabriele - if your goal is simplicity (perhaps maintainability is what you meant), then it is better to make it obvious where DOM methods area being used. Mixing jQuery and DOM methods in the one expression is the opposite of that. The problem with the object wrapping approach adopted by jQuery is that it needs to provide an equivalent function for every DOM method, plus getters and setters for every DOM property. The authors seem to have chosen to only duplicate some methods and properties. – RobG Jun 19 '11 at 23:24

score 0 · Answer 3 · edited May 23 '17 at 12:04

In jQuery 1.6, you could use prop(). In older versions, attr() could be used.

$("#maintext").prop("selectionStart");

However, selectionStart and selectionEnd properties are not supported in IE < 9. I've published a cross-browser function to work round this in a few places on Stack Overflow (for example, here), or you could use my jQuery plug-in for dealing with textarea/text input selections.

How do I get normal attributes of an element when selected with jQuery?

3 Answers3