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

虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象。

什么是范围

范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围)。最常见的范围就是用户选取的文本。当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象。然而,你也可以让程序自动选择范围。

让我们以下面的代码为例。假设用户选择了下面的文字:

<h4><a
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>

你可以将用户选择转换为一个包含用户选择范围的文本的范围对象(后面讲)。根据范围对象,你能找到开始和结束的范围点。如果你愿意你可以删除它拷贝它或者用其他文本代替,甚至用HTML代码来代替。

这是范围对象最简单的例子了,因为他只包含文本。下面我们来看一个复杂的例子:

<h4><a
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>

另外一个范围对象被创建了,而且还包含HTML。问题在于用户的选择范围跨越了几个元素。去掉其他的内容,就剩下:

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 toleran

这是一段不完整的HTML。幸好所有的浏览器都会转化一下:

<p>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 toleran</li></ol>

正如你所看到的,浏览器会添加最少的元素让这段HTML完整,如果你复制的话,那么这些添加的东西也会被复制。

浏览器兼容性一览

在我们继续之前,有必要看看浏览器的兼容性。主要问题在于这里有不下3个范围对象的类型,你必须都有所了解才行。

Module  

Explorer 6/7

  Firefox 2   Safari 1.3   Opera 9  
W3C Range   no   yes   yes   yes  
Mozilla Selection   no   yes   incomplete   yes  
Microsoft Text Range   yes   no   no   incomplete  
访问用户选区

要处理用户的选择就必须先访问到用户的选区。这会立马又一个代码分支:IE使用微软的方法,其他浏览器使用Mozilla的方法:

复制代码 代码如下:


var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}


在Mozilla,Safari,Opera里面现在userSelection是一个选择对象(selection object),在IE中是一个文本范围对象(text range object)。这个区别在后面的代码中依然有效:IE的文本范围对象和W3C的范围对象以及Mozilla的选择对象有根本的不同,每一部分的代码都需要另一部分的补充。

要注意分支的顺序:Mozilla Selection一定要在前。因为Opera两种都支持,如果你用window.getSelection()读取用户的选区,Opera就会创建一个选择对象,可是你用document.selection的时候他也会创建一个文本范围对象。

虽然Opera支持Mozilla和W3C模式很不错,但是支持IE确是有毛病,这样就不得不把window.getSelection放在前面检测。

userSelection的内容
现在userSelection既是一个Mozilla的选择对象又是IE的文本范围对象。这样他就可以使用所有的方法和属性了。

然后,Mozilla的选择对象userSelection里面保存的用户选择的文本(而不是HTML)。这样写:

复制代码 代码如下:

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

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