Range在各瀏覽器下的問題和常見處理辦法

第一次聽到Range這個概念是在空間編輯器的技術交流會上，當時作者給我們提到編輯器中最重要的概念就是Range，通過操作range，就可以實現編輯器的所有操作。到底具體什么是range呢，其實簡單點就是選區，大家對矩形可能有概念，其實range可以理解為矩形，只要我們選定了一個文本，那么這個文本就占有空間了，所以range是有起始和結束位置的。

一、關於瀏覽器的兼容性

　　　目前主要有3種關於range的類似的對象，分別是W3C range 對象，Mozzlia selection ，ie TextRange

　　關於這三種的區別，請查看文檔 http://www.quirksmode.org/dom/w3c_range.html 這里面對這三個是說的很清楚的

　　可以看出 Mozilla 的 range 是一個selection對象 ，而在ie下 range 是一個 text Range 這個和Mozilla是完全不同的，所以需要為這兩種類型的range

分別寫不同的兼容性的腳本，目前主流瀏覽器 Mozilla,chrome safari,opera 都支持 selection 對象，但是opera 也支持 IE 下text Range ，但是不全面。

所以代碼應該這樣

var selection; //申明range 對象
if (window.getSelection) { 

　　//主流的瀏覽器，包括mozilla，chrome，safari
    selection = window.getSelection();
} else if (document.selection) { 
    selection = document.selection.createRange();//IE瀏覽器下的處理，如果要獲取內容，需要在selection 對象上加上text 屬性
}　

其實判斷瀏覽器的兼容性，我們還可以這么判斷

if (Obj.createTextRange) {
　　//IE瀏覽器下的操作
} else if (Obj.setSelectionRange) {

　　//非IE 下的一些操作

}

我跟蹤了下載chrome 和IE下的這些對象，上圖給大家看一下

 

在ie下，如果創建了range對象，那么就有 

　　range.moveEnd()

　　range.moveStart()

　　range.select();

可以實現選定文本的操作

在其他瀏覽器下，可以通過obj.setSelectionRange() 來實現選定操作，具體格式如下

o.setSelectionRange(start,end);

　　o：為文本輸入框對象

　　start：為字符串的起始位置

　　end：為字符串的末位置

在鼠標的位置處，實現文本的插入操作，在ie下

可以通過document.selection.createRange().text = value;

其中 document.selection.createRange() 表示當前鼠標的位置的TextRange 對象， textRange.text = value表示在當前鼠標處插入值

在其他瀏覽器下中可以通過 obj.value = str +value +str1  的形式

在非ie下 對於文本框這種輸入的obj,是有 selectionStart，selectionEnd屬性的，表示當前鼠標的位置。

總結:

　　1）提到了range對象不在同瀏覽器下創建，獲取文本的內容以及兼容性的問題

　　2）如何通過range對象，實現文本框中的文本插入操作

　　3）如何通過range對象，實現文本的選定以及光標移動操作

歡迎大家拍磚。。