selection对象操作,textRange对象对于用户选区的操作方法,获取用户选区的内容。
2016-12-28 20:10

 上篇文章,我们讨论了textRange,已经selection对象中input元素中的操作。今天我们介绍一下selection对象中非input元素的操作,通过selection的API可以相应用户的文本选中操作。废话不多说,我们先从IE看起。

 document_Selection.png

IE的document中有selection对象。


body_createTextRange.png

body中有一个creatTextRange方法。

selection对象有一个createRange方法,所以我们可以得到IE中的textRange。

var rg=document.selection.createRange();
//body创建的textRange行为有些怪异,所以要采用document获取。
var rg=document.body.createTextRange();

IE_rangeWOrd.png

textRange对象中红框里面的方法之上篇文章中已经阐述的很清楚了,这里就不介绍了,主要看其他一些方法。

我们先来实现页面的全选功能。看一下方法中有一个expand方法似乎能满足我们的需求:

expand.png

expand方法中的有一个单位参数,表示选中的范围。

rg.expand("character");
rg.select();

character.png

character是选中一个字符。

word.png

word是选中一个单词。如果是汉字,两个单位是一样的效果。sentence表示选中一个句子,实在中文档中使用有问题,选中的可能是整个文档。他说的句号不知道指的是什么。

textedit是选中整个范围,也就是全选。

var rg=document.selection.createRange();
 rg.expand('textedit');
 rg.select();

我们可以通过以上代码实现全选。document.body.createTextRange()得到的range对象,expand传何值都是全选。

seleciton从文档上看到,还有一个clear方法,一个empty方法

var selection=document.selection;
var rg=selection.createRange();
 rg.expand('character');
 rg.select();
 selection.clear();

clear.png

clear方法是删除选区内容,通过此方法,我们把文档中的第一个字符给删除了。empty方法是清空选区,也就是取消用户的选中状态。

body有onselectstart事件,document有onselectionchange事件,通过这两个时间,我们可以相应用户的选中行为。

结合selecion的empty方法,我们可以阻止用户选中文档。

var selection=document.selection;
document.body.onselectstart=function(){
    selection.empty();
}
//或者
document.onselectionchange=function(){
    selection.empty();
}

这两个方法都是从textRange层阻止用户选中文档。如果你的页面不希望用户选中copy,可以这么办!(css样式的use-select:none;阻止用户选中太好解除了)。

有了这两个事件,我们可以获取用户选中的文本内容,对此做进一步处理。

htmlText.png

htmlText的文档说明有错误。

var rg=document.selection.createRange();
var text=rg.text;
var text=rg.htmlText;

通过这两个方法我们能获得用户选用的内容。可以获得内容,我们怎么改变内容呢?可以采用直接给rg.text赋值的方式来修改能容。

duplicate方法介绍

这个方法返回的是textRange的副本。

var dup=rg.duplicate();

有什么用途呢,我们可以保留用户选区,当处理事件后置,不知当前的时候,用它最合适。

var selection=document.selection;
var rg=selection.createRange();
rg.moveEnd('character',3);
rg.select();
var dup=rg.duplicate();
selection.empty();
dup.text="sun";

上面这段代码执行的时候,我们把mooshine改成了sunshine,但是是在选区取消之后并且调用了empty方法清空了选区后改变的,这是后我们就需要使用它的副本来进行操作了,副本可以让我们连续对选区进行操作。

findText方法用来查找是否包含某段文本。

rg.findText("mo");

可以用来判断选区内容是否有要处理的文本。

inRange方法可以判断一个range是否中另一range范围内。

rg.moveEnd('character',3);
rg.select();
var dup=rg.duplicate();
rg.moveStart('character',10);
rg.moveEnd('character',20);
rg.select();
console.log(rg.inRange(dup));

用duplicate保存副本,然后修改range范围,判断是否包含关系。这个方法的意思是,判断rg中是否包含dup选区。

moveToElementText这个方法很有用。

moveToelement.png

翻译过来就是:移动textRange范围的开始和结束点到给定的元素中,并且包围元素的文本。也就是选中指定的元素。

var dom=document.getElementById("tt");
rg.moveToElementText(dom);
rg.select();

这样我们就可以让一个dom元素中的内容被选中。

moveToPoint(x,y)跟moveToElementText类似,但是是移动到指定点,并且是合并开始结束点。

注:此方法必须移动到能获取光标的文字位置上,否则移动到空白处IE会报错,所以最好用在inline元素上面最一些mousemove之类的事件,比如让光标跟随鼠标移动。

setEndPoint方法一句一个range设置另一个rang的范围,可以将一个range的开始设置到另一个range的结束位置。

isEqual方法判断两个range是否相等。

到这里IE下的range方法的api基本已经说完了,还剩下一个execCommand方法。此方法内容比较多,单另一篇介绍。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3216)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1