Detecting if textarea content is selected using JavaScript

Question

We have a few text areas that have some text the user may copy to their clipboard.

Without going into too much detail as it will just complicate a straightforward question:

Is it possible to detect if a textarea's contents are 'selected'?

I should mention using the onclick (or other) event handlers are (ideally...) not an option.

As this text is selected by an 'outside of the textarea' action.

The flow is somewhat as follows:

Drop down choice is chosen -> Text in textarea is selected

Or

Textarea is clicked (onclick) -> Text in textarea is selected

I know we could use a whole bunch of event handlers to detect the state of the text in the textarea, but I was hoping there was a simpler way of doing by detecting the state of the text inside the textarea via JavaScript.

See http://stackoverflow.com/questions/401593/javascript-textarea-selection/403526#403526 and http://stackoverflow.com/questions/717224/how-to-get-selected-text-in-textarea — Sahil Muthoo, Sep 13 '11 at 08:31

score 3 · Answer 1 · answered Sep 13 '11 at 08:30

3

The selectionStart and selectionEnd properties hold the selection indexes.

var textarea = document.getElementById("textarea1");
if(textarea.selectionStart == textarea.selectionEnd) alert("Nothing is selected!")

answered Sep 13 '11 at 08:30

Rob W

341,306
83
791
678

score 2 · Accepted Answer · edited May 09 '22 at 15:35

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);
}

selected this answer because of the trident vs proper browser fork. thank you! — anonymous-one, Sep 13 '11 at 08:44

score 1 · Answer 3 · answered Sep 13 '11 at 08:32

1

Have a look at this demo. They use the jQuery - fieldSelection plugin.

answered Sep 13 '11 at 08:32

Reto Aebersold

16,306
5
55
74

1

both are valid answers, but we dont use jquery :) – anonymous-one Sep 13 '11 at 08:34

Detecting if textarea content is selected using JavaScript

3 Answers3