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 stackoverflow.com/questions/401593/… and stackoverflow.com/questions/717224/… — Sahil Muthoo
– Sahil Muthoo, Commented Sep 13, 2011 at 8:31

Rob W · Accepted Answer · 2011-09-13 08:30:47Z

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, 2011 at 8:30

Rob W

351k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Mortensen · Accepted Answer · 2022-05-09 15:35:22Z

2

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

edited May 9, 2022 at 15:35

Peter Mortensen

31.3k22 gold badges110 silver badges134 bronze badges

answered Sep 13, 2011 at 8:39

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

1 Comment

anonymous-one Over a year ago

selected this answer because of the trident vs proper browser fork. thank you!

Reto Aebersold · Accepted Answer · 2011-09-13 08:32:59Z

1

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

answered Sep 13, 2011 at 8:32

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

1 Comment

anonymous-one Over a year ago

both are valid answers, but we dont use jquery :)

Collectives™ on Stack Overflow

Detecting if textarea content is selected using JavaScript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related