TextArea SelectedText, SelectionStart, SelectionEnd, SelStart, SelEnd (IE and FireFox)

Simple way of getting the html textarea’s selection properties selectedText, selectionStart, selectionEnd:

Javascript:

 function getTextAreaSelection() {
   var textArea = document.getElementById('textarea1');
   if (document.selection) { //IE
       var bm = document.selection.createRange().getBookmark();
       var sel = textArea.createTextRange();
       sel.moveToBookmark(bm);
     
       var sleft = textArea.createTextRange();
       sleft.collapse(true);
       sleft.setEndPoint("EndToStart", sel);
       textArea.selectionStart = sleft.text.length
       textArea.selectionEnd = sleft.text.length + sel.text.length;
       textArea.selectedText = sel.text;  
   }
   else if (textArea.selectionStart){ //FF
      textArea.selectedText = textArea.substring(textArea.selectionStart,textArea.selectionEnd);
   }
  
   alert("Selection Start==> " + textArea.selectionStart + "\n" +
      "Selection End  ==> " + textArea.selectionEnd + "\n" +
      "Selected Text  ==> " + textArea.selectedText + "\n" +
      "TextArea Value ==> " + textArea.value);
 }

HTML:

<textarea id="textarea1"></textarea> <button onclick="getTextAreaSelection()">Get Selection Info</button>
About these ads

5 thoughts on “TextArea SelectedText, SelectionStart, SelectionEnd, SelStart, SelEnd (IE and FireFox)

  1. What if the selected text is repeated within the content?

    “textArea.value.indexOf” will return the first instance of the selected text, but that may not be the text that is actually selected, they are just the same because they are repeated.

    For example: “My name is Fred, and his name is John.”

    If I select the second instance of “name is”, when I run your function I will get the first. This isn’t a problem if you just want to know the text that is selected, but it is if you want to manipulate it.

  2. You have a point there them, I have update the code but there is still a little problem, it cannot return the correct caret position in IE.

  3. I know I’m a little out of date, but I found this helpful, but noticed a few things.
    I’m getting my page to work in FF first, then I’m trying IE, but you can’t call substring of an HTML element, you have to call substring on it’s value instead.
    As for manipulating the data;
    selectedText = textArea.value.substring(textArea.selectionStart,textArea.selectionEnd);
    will return the value, however, if you want to manipulate it, you’ll want to add 2 more variables:
    part1 = textArea.value.substring(0,textArea.selectionStart);
    part2 = textArea.value.substring(textArea.selectionEnd,textArea.textLength);

    And use standard string addition… depending on what you want to do with it of course.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s