How to get the target element for an 'selectionchange' dom event

Question

I find myself in a situation where I want to get the target element that triggered the selectionChange dom event.

But judging by https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange, it seems that the element in e.target is always the document object in the normal (non-input, non-textarea) case.

So does that mean I will have to manually call window.getSelection, and figure out the current cursor location and find the dom node that way?

Does anyone know of a short cut? or some working example would be nice.

score 2 · Accepted Answer · answered Jun 15 '19 at 18:34

If your element can become an active element, use document.activeElement to get the element we're selecting inside of. This will work with textareas, inputs, and on elements whose tabindex is set.

// NOTE: activeElement can only be found on selectable elements!

document.addEventListener('selectionchange',function(){
 document.getElementById('currentTag').innerHTML = document.activeElement.tagName;
});

#currentTag{
  font-weight:bold;
}

<textarea>This is sample text you can replace and move your cursor within. Whee!</textarea>

<br><input type="text" placeholder="Input">

<p tabindex="0">P tag text is the best tag text. <span color="blue">Unless you have a span.</span></p>

<ol tabindex="0">
  <li tabindex="0">Item 1</li>
  <li tabindex="0">Item 2</li>
</ol>

<p id="currentTag"></p>

Hey umm.. thanks for answering to a question I asked 3 years ago XD I should have picked an answer.. — Zhen Liu, Jun 17 '19 at 05:19
I figured it was too late for you at this point, but I was searching for the same thing and found this question. I wanted to answer for others coming along. :) Thanks for accepting my answer though. — Josh Powlison, Jun 18 '19 at 10:01

score 0 · Answer 2 · edited May 23 '17 at 12:33

You can use document.selection to get what is currently selected.

Example taken from http://help.dottoro.com/ljixpxji.php

<head>
    <script type="text/javascript">
        document.onselectionchange = OnChange;
        function OnChange () {
            var range = document.selection.createRange ();
            if (range.text.length == 0) {
                alert ("The current selection is empty");
            }
            else {
                alert ("The contents of the current selection are\n" + range.text);
            }
        }
    </script>
</head>
<body>
    Select this text on this page!
</body>

--EDIT--

As pointed out by @user1017674 this code does not work in chrome, after a little bit of research I found document.selection should only be used in IE < 9. It seems that window.getSelection() is still going to be the best way to get it.

Ref. Does chrome supports document.selection?

I don't know if you have tried this code on chrome.F12 and copy&paste into console. document.selection keeps giving me undefined. Is there some way to get the selected dom node? — Zhen Liu, Oct 14 '16 at 04:32

How to get the target element for an 'selectionchange' dom event

2 Answers2