将window.getSelection()。extentOffset引用到特定的HTML元素
问题描述:
下面的代码找出用户选择的开始,如果用户选择文本“文本”,这是“18”。将window.getSelection()。extentOffset引用到特定的HTML元素
<p>I am some example text, you don't have to read it :P</p>
<script>
function findsel(){
console.log(window.getSelection().baseOffset);
// Returns 18
}
</script>
如果段落被中断......
<p id="mytext">I am some <em>example</em> text, you don't have to read it :P</p>
<script>
function findsel(){
console.log(window.getSelection().baseOffset);
// Returns 1
}
</script>
...和用户选择 “文本” 再次,选择的开始将是 “1”,因为它开始计数在</em>
标签处。
有没有办法将getSelection方法引用到某个元素(在这种情况下为#mytext
),以便它开始计算此指定元素的开始而不是在最后一个介于节点之间?
答
通过getSelection()
返回的Selection
对象引用两个节点:
getSelection().anchorNode
是含有其中该选择开始的位置的节点(即,在用户的鼠标击落最初)。getSelection().focusNode
是包含选择结束位置(即用户释放鼠标的位置)的节点。
这意味着,相同选择的偏移量可以是相反的顺序,这取决于用户开始选择的位置。只是要记住。
现在你的问题:在html中,所有文本都是文本节点。在你的榜样,有三个文本节点:
I am some
example
text, you don't have to read it :P
所以,无论你选择,focusNode
和anchorNode
将指向这些文本的一个(或两个)节点,而focusOffset
和anchorOffset
将在相应文本节点的开始处开始计数。
据我所知,没有办法使选择开始计数在父节点<p>
的开始。你必须自己做:你可以计算一次所有文本节点的长度。然后确定选择开始的文本节点,并将偏移量添加到所有先前节点的长度总和中。我将不得不更多地了解你正在努力完成的任务,以给你更多的建议。