已補全 IE6,IE7,IE8下使用Javascript記錄光標選中范圍
剛和同事討論了一個很有趣的問題，有個idea，需要記錄用戶在頁面選中的內容，在ff和ie9下有w3c的dom2級事件createRange，這里不再累贅 。主要問題是在IE6,7,8只能通過createTextRange選中熱區 。假如我們知道用戶選擇開始元素和偏移量，以及結束元素以及偏移量，那么我們可以用下面的例子把用戶選擇的內容用js給標記起來
復制代碼 代碼如下:
head
script
function mark() {
var b= document.getElementById ("b");
var b1= document.getElementById ("b1");
var b2= document.getElementById ("b2");
var a1 = document.body.createTextRange();
a1.moveToElementText(b);
a1.moveStart(’character’,17);
var a2 = document.body.createTextRange();
a2.moveToElementText(b1);
a2.moveEnd(’character’,-2);
a1.setEndPoint ("EndToEnd",a2);
a1.select();
}/script
/head
body
div id="b"The bcontents/b of the isource/i element./div
div id="b1"The bcontents/b of the isource/i element./div
div id="b2"The bcontents/b of the isource/i element./div
button onclick="mark();"Mark/button
/body
ok，從上面的代碼 ， 我們可以知道，在IE6,7,8下 ， 需要關聯多個元素的選擇時候，我們需要創建兩個textRange，一個是開始節點，以及偏移量 ， 還有一個結束節點，以及偏移量，兩個textRange用a1.setEndPoint關聯
參考文檔：http://help.dottoro.com/ljgbbkjf.php
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
上面是我們知道開始結束位置的情況下，那我們如何知道用戶自己選中的熱區的開始，結束節點和偏移量呢？
很可惜查了半天，MSDN只有以下幾個屬性可以利用，
textRange.parentElement返回選中熱區的父親節點，可以幫助我們確定，一個大概的范圍
boundingLeft,offsetLeft ， 可以知道熱區的左偏移距離
boundingTop,offsetTop，可以知道熱區的上偏移距離
text，選中的文本內容，htmlText選中的html內容
可以沒有直接的index…，和開始節點 。。。之類
好吧，如果我們要通過位置來算的話，我們可以通過每行的line-height，計算高度，如果是一個節點的話，要計算節點的height,padding,marging ，
如果是計算左偏移的話，要計算font-size，margin,padding,letter-space，這樣我們通過css的計算，可以得到大致的位置，
然后我們結合text，和htmlText去比對附近的元素的文本內容，可以得到索引的坐標
這樣 基本上我們可以確定開始/結束節點，以及偏移量了，
不過這樣做的成本也是比較高的，不知道大家還有沒有好的辦法，或者hacker的方法^_^
==================================================================================
剛才又看了下htmlText方法，有個驚奇的發現，還是上面的例子 ， htmlText返回如下
DIV id=srche Isource/I element./DIV
DIV id=src1The Bcontents/B of the Isource/I element/DIV可以看到開始節點的tagName，還有選中的內容，可以通過去掉開頭結尾的html tag，然后用正則判斷取到這段html代碼在之前的parent.innerHTML的位置，這樣偏移量也就取到了，ok，不需要通過判斷offset的方式，我們就可以取到開始，結束節點，以及偏移量了
這樣在IE6,7,8下，可以記錄用戶任意選中的內容的開始、結束節點，以及偏移量了^_^
=============================================================
只是這樣做，還有一個唯一的缺點就是對于單個字符，或者重復出現的單詞，還是得通過css的offsetLeft 這樣的屬性 ，通過判斷距離，還確定是否是選中的那個，不知道大家有沒好的建議
===============================================================
然后今天早上，今天靈光一現，互發奇想，解決不需要通過offsetTop,left判斷單個node內部，重復字符的偏移量問題
代碼如下
復制代碼 代碼如下:
head
script
function mark() {
var selection=document.selection.createRange();
if(selection.text.length==0){
return;
}
var textLength=event.srcElement.innerText.length;
var oldSelectionParent=selection.parentElement();
do{
selection.moveEnd("character",1);
}while(selection.parentElement()==oldSelectionParent);
selection.moveEnd("character",-1);
alert(textLength - selection.text.length);
}
function load(){
document.body.onmouseup=mark;
//document.body.onmousedown=mark;
}
/script
/head
body onload="load()"
div 飛 a a a a 飛飛飛飛飛a飛 a a a /div
/body
原理就是利用在一個節點內部，不斷偏移1個字符，到底部或者頂部，計算偏移量的方法，因為對于單個元素內的熱區，他的parentElement()返回就是他自己，如果跨多個節點，之后，返回的parentNode就是他自己的父節點了，可以通過這個變化，判斷，是否移動到該節點文本的盡頭 。^_^這樣就可以計算偏移量了
ok，總結 ， 通過htmlText的屬性可以解決多節點選中熱區的定位問題，對于單節點內部重復字符，可以通過文中最后一部分代碼解決，這樣在IE下，記錄光標選中位置，和復現的方法就完美了^_^
============================================
去kissy群問了下 ， 原來承玉已經做過全兼容的取位置的代碼，鏈接如下
http://www.jb51.net/article/28120.htm
【已補全 IE6,IE7,IE8下使用Javascript記錄光標選中范圍】代碼：http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html
您可能感興趣的文章:javascript仿百度輸入框提示自動下拉補全JSPajax實現輸入框自動補全功能 實例代碼js自動閉合html標簽(自動補全html標記)JS數組排序方法實例分析javascript數組去重方法分析JavaScript常見的五種數組去重的方式javascript中數組（Array)對象和字符串（String)對象的常用方法總結JavaScript利用正則表達式替換字符串中的內容JS經典正則表達式筆試題匯總Ajax遍歷jSon后對每一條數據進行相應的修改和刪除(代碼分享)遍歷js中對象的屬性和值的實例JS限制條件補全問題實例分析
