selectionStart-End with textareas

I'm having this annoying problem, I can't seem to get the starting and ending index of the selected text in a textarea, all I get is undefined like this:

$('#myarea').selectionStart; // return undefined

Did I do something wrong?

Answers:

Answer

Try:

$('#myarea')[0].selectionStart;

Why? A jQuery selector does not return the actual DOM elements but the wrapped jQuery collection. jQuery makes the actual DOM elements accessible as an array, so if you wanted to use the 1st matched element (and in this case, the only one, since it's by ID), you would do the above.

Answer

Since jQuery version 1.6, you can use .prop() method:

Get:

// always start at 0

var start = $('#myarea').prop('selectionStart');
var end = $('#myarea').prop('selectionEnd');

Set:

$('#myarea').prop('selectionStart', 10);
$('#myarea').prop('selectionEnd', 15);

// or short hand by

$('#myarea').prop({
    'selectionStart': 10,
    'selectionEnd': 15
});
Answer

For managing text selections I highly recommend you the fieldSelection plugin

Answer

Another plug-in you could use, and the only one I'm aware of that correctly handles line breaks in IE, is my own Rangy Inputs plugin.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.