雖然我們會講解用程序創建范圍對象,但是我們把精力主要集中在如何將用戶的選取范圍轉換成為W3C 范圍或者微軟的文檔范圍對象。
范圍是指HTML文檔中的任意一部分內容。一個范圍的開始和結束點都可以是隨意的,甚至是相同的(一個空范圍)。最常見的范圍就是用戶選取的文本。當用戶在頁面上選取了一部分,你就可以他的選取部分轉換為范圍對象。然而,你也可以讓程序自動選擇范圍。
讓我們以下面的代碼為例。假設用戶選擇了下面的文字:
<h4 id="entry1196"><a
class="external">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 id="entry1196"><a
class="external">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的方法:
理想情況下,我們通過選擇對象的getRangeAt()來訪問W3C范圍對象。這個方法會在給定的位置返回一個范圍對象:就像平常一樣第一個范圍對象的編號是0。(getRangeAt()已經設計好如果有多處選擇的情況下怎么辦。在那種情況下你的代碼也很簡單)
不幸的是Safari1.3不支持getRangeAt()。因此我們需要創建一個跟用戶選擇一樣的范圍對象。這是一個很好的練習機會,可以讓你知道如何創建自己的范圍對象。
很明顯的從創建一個對象開始:
var range = document.createRange();
現在我們已經有了一個空對象。為了把他插入到文檔里面去我們需要使用setStart()函數和setEnd()函數。
這兩個方法需要兩個參數:
1、在哪個DOM節點上開始或者結束的?
2、從哪個文本偏移上開始或者結束的?文本偏移就是指范圍對象的第一個或者最后一個字符的位置。
讓我們再來看一遍第二個例子:
class="external">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個字符時范圍內的最后一個字符了。
如何創建這個范圍對象:
新聞熱點
疑難解答