JavaScript DOM 学习第九章 选取范围的介绍(2)

alert(userSelection)


就会产生:

calls for a Blogger Code of Conduct. His proposals are: Take responsibilitynot just for your own words, but for the comments you allow on your blog.Label your toleran如果想在微软的文本范围对象中得到相同的内容你就要使用:

var selectedText = userSelection;if (userSelection.text)    selectedText = userSelection.text;现在selectedText就包含了用户选择的文本。如果你觉得这样的信息足够的话,那么就开始准备后面的工作吧。

从选择对象创建范围对象
很多时候,你想处理的是代表用户选择范围的范围对象(range object)。在微软模式中条件已经具备:userSelection就是一个文本范围。在兼容W3C的浏览器中userSelection依然只是一个选择对象,是时候创建一个与选择对象内容相同的范围对象了。

按照下面这样:

复制代码 代码如下:


var rangeObject = getRangeObject(userSelection);
function getRangeObject(selectionObject) {
    if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        return range;
    }
}


理想情况下,我们通过选择对象的getRangeAt()来访问W3C范围对象。这个方法会在给定的位置返回一个范围对象:就像平常一样第一个范围对象的编号是0。(getRangeAt()已经设计好如果有多处选择的情况下怎么办。在那种情况下你的代码也很简单)

自从创建一个范围

不幸的是Safari1.3不支持getRangeAt()。因此我们需要创建一个跟用户选择一样的范围对象。这是一个很好的练习机会,可以让你知道如何创建自己的范围对象。

很明显的从创建一个对象开始:

var range = document.createRange();

现在我们已经有了一个空对象。为了把他插入到文档里面去我们需要使用setStart()函数和setEnd()函数。

这两个方法需要两个参数:

1、在哪个DOM节点上开始或者结束的?

2、从哪个文本偏移上开始或者结束的?文本偏移就是指范围对象的第一个或者最后一个字符的位置。

让我们再来看一遍第二个例子:

href="https://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
>Call for a Blogger's Code of Conduct</a></h4>

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
<li>Take responsibility not just for your own words, but for the
comments you allow on your blog.</li>
<li>Label
your tolerance level for abusive comments.</li>
<li>Consider eliminating anonymous comments.</li>
</ol>

范围从<p>节点开始,并且文字偏移量是13,因为第14个字符已经是包含在范围里面的了(和通常一样,编号从0开始的)。

范围从<li>结束,偏移量是17,因为第18个字符时范围内的最后一个字符了。

如何创建这个范围对象:

复制代码 代码如下:


var startPar = [the p node];
var endLi = [the second li node];
range.setStart(startPar,13);
range.setEnd(endLi,17);


(注意现在创建的范围对用户不可见,只在浏览器的内部)

现在我们已经创建了一个范围,我们也可以读出他的开始和结束点。startContainer和startOffset决定了范围的开始位置,同样的endContainer和endOffset决定了结束位置。

读取选区的开始和结束位置
不幸的是,你并不知道用户选择了页面哪个部分。所以你需要先读出用户选择的开始和结束的位置:这个必须在选择对象(selection object)里面完成,因为这时候还没有范围对象(range object)。

我们刚刚看到每一个范围对象都有标明他开始和结束位置的四个属性。选择对象也有相似的。当然是另外的名字:anchorNode/anchorOffset代表开始位置,focusNode/focusOffset代表结束位置。

所以读出了选择对象的开始和结束位置之后我们就能创建范围对象了:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdspyz.html