我发现自己处于这样一种情况:我想获取触发selectionChange dom事件的目标元素。但是根据https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange,在正常(非输入、非文本区域)情况下,e.target中的元素始终是文档对象。那么这是否意味着我必须手动调用window.getSelection,并确定当前光标位置并以此找到dom节点?有没有人知道一些捷径?或者一些工作示例会很好。
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>
您可以使用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()
仍然是获取它的最佳方式。