被选择文本示例代码:
<p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p>
以下几个属性和方法兼容性良好,而且对文本和输入框都有效。
var selObj = window.getSelection();
// 获取跟选择范围有关的信息
var selRange = selObj.getRangeAt(0);
// 返回选中的文本
var selectedText = selObj.toString();
// 返回聚焦元素
var active = document.activeElement;
锚点是用户开始选择的位置,焦点是用户选择结束的位置。如果使用桌面鼠标进行选择,则锚点是按下鼠标按钮的位置,焦点是释放鼠标按钮的位置。锚点和焦点不应与选择的开始和结束位置混淆。
一、Selection属性
1. Selection.anchorNode
返回选择的锚点的节点。如果文档中从未存在选择,则返回null。
2. Selection.anchorOffset
返回一个数字,表示选择的锚点的偏移量。如果anchorNode是文本节点,则这是锚点之前的anchorNode中的字符数。如果anchorNode是一个元素,则这是锚点之前的anchorNode的子节点数。
3. Selection.focusNode
返回选择的焦点的节点。如果文档中从未存在选择,则返回null。
4. Selection.focusOffset
返回一个数字,表示选择的焦点的偏移量。如果focusNode是文本节点,则这是焦点之前的focusNode中的字符数。如果focusNode是一个元素,则这是焦点之前的focusNode的子节点数。
5. Selection.isCollapsed
返回一个布尔值,表示锚点和焦点是否位于同一位置。
6. Selection.rangeCount
返回选择中的范围数。
7. Selection.type
返回当前选择的类型(Range,Caret 等)。
二、Selection方法
1. Selection.addRange()
添加选择范围(目前只有Firefox支持多个选择范围)。
2. Selection.containsNode(node [,partial])
表示某个节点是否是选择的一部分。
partial 当设置为true时
,节点的一部分是选择的一部分时返回true
。当设置为false时
,仅在整个节点是选择的一部分时返回true
。默认是false
。
3. Selection.deleteFromDocument()
从文档中删除选择的内容。
4. Selection.removeRange(range)
从选择中删除范围。
5. Selection.removeAllRanges()
从选择中删除所有范围。别名是 Selection.empty()。
6. Selection.extend(node [,offset])
将选区的焦点移动到指定点。
参数:node
- 将移动焦点的节点。
offset -
焦点移动到node
的偏移位置。默认为0(按子节点的数量算)。
7. Selection.getRangeAt(index)
返回其中一个选择范围。
8. Selection.selectAllChildren(parentNode)
选中指定节点的所有子节点。
9. Selection.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
将选择设置为包括两个指定DOM节点的全部或部分以及位于它们之间的任何内容的范围。
10. Selection.toString()
返回选中的文本。
参考:https://developer.mozilla.org/en-US/docs/Web/API/Selection