Understanding What Goes on with Textarea Selection with JavaScript

Understanding what goes on with textarea selection with JavaScript

Start with PPK's introduction to ranges. Mozilla developer connection has info on W3C selections. Microsoft have their system documented on MSDN. Some more tricks can be found in the answers here.

In addition to incompatible interfaces you'll be happy to know that there is extra bizarreness going on with textarea nodes. If I remember correctly they behave as any other nodes when you select them in IE, but in other browsers they have an independent selection range which is exposed via the .selectionEnd and .selectionStart properties on the node.

Additionally, you should really take a look at .contentEditable as a means to edit things live. From the release of Firefox3, this is now supported by all browsers.

How can I get the selected text in a textarea?

Try the jquery-fieldselection plugin.

You can download it from here. There is an example too.

Keep the selection in a textarea

I don't think that's a good idea. A user with mouse in his/her hand can click anywhere on the page. If you get him/her back into the textarea, it won't be following the principles of web accessibility.

Detecting if textarea content is selected using JavaScript

This code is taken from this question. You'll need to adapt the code slightly, but it shows how to access the selection for both Mozilla and Internet Explorer browsers -

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;
  // Internet Explorer version
  if (document.selection != undefined)
  {
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }
  // Mozilla version
  else if (textComponent.selectionStart != undefined)
  {
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
  }
  alert("You selected: " + selectedText);
}

Getting and setting of a text selection in a textarea

Use JQuery.

For instance, the following two lines get the caret position:

function showselection() {
    console.log($('#myTextarea')[0].selectionStart);
    console.log($('#myTextarea')[0].selectionEnd);
}

There are some plug-ins:

https://github.com/localhost/jquery-fieldselection

http://madapaja.github.io/jquery.selection/

The second one has several short samples with buttons (where we may lose selection). You could either use their API, or look into their code to see which JQuery functions they call.

Displaying the selected text in text area

Your same code worked for me in fiddle, just not asp.net :

    <script>
  function ShowSelection() {
    var textComponent = document.getElementById('TextArea1');
    var selectedText;
    if (document.selection != undefined) {
      textComponent.focus();
      var sel = document.selection.createRange();
      selectedText = sel.text;
    } else if (textComponent.selectionStart != undefined) {
      var startPos = textComponent.selectionStart;
      var endPos = textComponent.selectionEnd;
      selectedText = textComponent.value.substring(startPos, endPos)
    }
    alert("You selected: " + selectedText)
  }

</script>

<input id="TextArea1" type="textarea" />
<a href="ShowSelection()" onclick="ShowSelection()">click me </a>

Point is Why are you calling alert on ShowSelection() function again, that function itself is alerting, not returning any string value.

Please check.

---

Related Topics