Как да получите целевия елемент за събитие dom 'selectionchange'

Озовавам се в ситуация, в която искам да получа целевия елемент, който е задействал събитието selectionChange dom.

Но съдейки по https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange, изглежда, че елементът в e.target винаги е обектът на документа в нормалния (без въвеждане, без текстово поле) случай.

Това означава ли, че ще трябва ръчно да извикам window.getSelection и да разбера текущото местоположение на курсора и да намеря dom възела по този начин?

Някой знае ли за пряк път? или някакъв работещ пример би бил хубав.


javascript html dom-events
person Zhen Liu    schedule 14.10.2016    source източник

Отговори (2)


arrow_upward
2
arrow_downward

Ако вашият елемент може да стане активен елемент, използвайте document.activeElement, за да получите елемента, който избираме вътре. Това ще работи с текстови полета, входове и елементи, чийто tabindex е зададен.

// 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>

person Josh Powlison    schedule 15.06.2019
comment
Хей хмммммммммм благодаря за отговора на въпрос който зададох преди 3 години XD трябваше да избера отговор... - person Zhen Liu; 17.06.2019
comment
Реших, че е твърде късно за вас в този момент, но търсих същото и намерих този въпрос. Исках да отговоря за други идващи. :) Благодаря, че прие отговора ми все пак. - person Josh Powlison; 18.06.2019

arrow_upward
0
arrow_downward

Можете да използвате document.selection, за да получите това, което е избрано в момента.

Пример, взет от 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>

--РЕДАКТИРАНЕ--

Както беше посочено от @user1017674, този код не работи в chrome, след малко проучване открих, че document.selection трябва да се използва само в IE ‹ 9. Изглежда, че window.getSelection() все още ще бъде най-добрият начин да го получите.

Реф. Chrome поддържа ли document.selection?

person blitz1616    schedule 14.10.2016
comment
Не знам дали сте пробвали този код на chrome.F12 и copy&paste в конзолата. document.selection продължава да ми дава undefined. Има ли някакъв начин да получите избрания dom възел? - person Zhen Liu; 14.10.2016