我在内容可编辑的div 中有一个跨度,我需要弄清楚光标是否在 span 标签上的最后一个位置。我查看了选择和范围解决方案,但找不到实现这一目标的直接方法。
<html>
<script>
var selection = window.getSelection();
var range = selection.getRangeAt(0);
//this is what I am trying to achive
var selection_target = range.selectNodeContents(document.getElementById('target'));
var length = selection_target.toString().length;
</script>
<body>
<div id='target' contenteditable='true'>
<span>some text(figure cursor position here)</span>
</div>
</body>
</html>
对于问题中跨度只有一个子节点(即文本节点)的情况,您可以检查插入符号是否位于其末尾,如下所示:
演示:http://jsfiddle.net/Wm5Hz/
法典:
var span = document.getElementById("target").getElementsByTagName("span")[0];
var spanTextNode = span.lastChild;
var sel = window.getSelection();
var isCaretAtEndOfSpan = (sel.isCollapsed
&& sel.focusNode == spanTextNode
&& sel.focusOffset == spanTextNode.data.length);
在一般情况下,事情稍微复杂一些:相同的视觉位置可以用不同的方式表示(例如,在文本节点中的最后一个字符之后,在文本节点本身之后,在范围结束之后),此外,如果范围可以包含元素,那么您需要找到范围内的最后一个文本节点并将选择与它进行比较。此外,这些在IE <9中都不起作用,IE 9具有完全不同的API。