背景:由于在Safari浏览器浏览器中光标定位引发一列基础知识的缺陷认识。以此,对基础知识整理和练习。
- 在光标定位时,有个方法是获取光标位置和获取的范围,这个方法就是 window.getSelection()
selection对象
window.getSelection(),返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。
测试核心代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>光标测试</title>
<style type="text/css">
.div{ width:600px; height:200px; border:1px solid #CCC}
.aclick{
cursor: pointer;
width: 50px;
text-align: center;
border: 1px solid red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.aclick').click(function () {
$('.div').html("回复[潇sdfsdfssssssssssssssdfsdf潇]:" + document.getElementById('content').innerText);
$('.div').focus();
po_Last_Div($('.div').get(0));
})
document.body.addEventListener("click", getWord, false);
});
function po_Last_Div(obj) {
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();
range.getRangeAt(0)
// range.selectAllChildren(obj);
// range.removeAllRanges(); // 取消所有选中区域
// range.collapseToEnd();
console.log('removeRange', range.removeAllRanges())
}
else if (document.selection) {//ie
var range = document.selection.createRange(); //创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
function getWord() {
var word = window.getSelection ? window.getSelection() : document.selection.createRange().text;
console.log('selection', word, '获取当前鼠标点击对象', word.getRangeAt(0), '获取内容', word.toString());
}
</script>
</head>
<body>
<div class="aclick">回复</div>
<div class="div" id="content" contenteditable="true">
</div>
<p>
<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字</textarea>
</p>
</body>
</html>
在鼠标点击文本区域就是会获取到Selection对象里各个值。
对于一些Selection对象属性不理解先明确一下Selection对象的各个属性的意义。
术语
锚点(anchor)
- 锚指的是一个选区的起始点。当我们使用鼠标选择一个区域的时候,锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时,锚点是不会变的。
焦点(focus)
- 选区的焦点是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。
范围(range)
- 范围指的是文档中连续的一部分。一个范围包括整个节点,也可以包含节点的一部分,例如文本节点的一部分。用户通常下只能选择一个范围。“范围”会被作为range对象返回。Range对象也能通过DOM创建、增加、删减。
属性
-
anchorNode
返回该选区起点所在的节点 -
anchorOffset
返回一个数字,表示该选区起点在anchorNode中的位置偏移量。
- 如果 anchorNode 是文字节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)
- 如果 anchorNode 是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)
-
focusNode
返回该选区终点所在的节点。 -
focusOffset
返回一个数字,表示该选区终点在focusNode中的位置偏移量。
- 如果 focusNode 是文字节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。
- 如果 focusNode 是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
isCollapsed
返回一个布尔值,用于判断选区的起始点和终点是否在同一位置。
- rangeCount
返回一个数字,表示该选区所包含的连续范围的数量。一般为1,因为通常情况下用户只能选择一个范围
方法
-
getRangeAt
返回选区开始的节点(Node)。
因为通常情况下用户只能选择一个范围,所以只有一个选区(range),此方法一般为getRangeAt(0) -
collapse(光标落在的目标节点, offset)
将当前的选区折叠为一个点 -
extend
将选区的焦点移动到一个特定的位置。 -
modify
修改当前的选区。 -
collapseToStart
将当前的选区折叠到起始点。 -
collapseToEnd
将当前的选区折叠到最末尾的一个点。 -
selectAllChildren
将某一指定节点的子节点框入选区
-addRange
一个区域(Range)对象将被加入选区。
-
removeRange
从选区中移除一个区域。 -
removeAllRanges
将所有的区域都从选区中移除。 -
deleteFromDocument
从页面中删除选区中的内容。 -
toString
返回当前选区的纯文本内容。