日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

已補(bǔ)全 IE6,IE7,IE8下使用Javascript記錄光標(biāo)選中范圍

云知道

剛和同事討論了一個(gè)很有趣的問(wèn)題，有個(gè)idea，需要記錄用戶在頁(yè)面選中的內(nèi)容，在ff和ie9下有w3c的dom2級(jí)事件createRange，這里不再累贅 。主要問(wèn)題是在IE6,7,8只能通過(guò)createTextRange選中熱區(qū) 。假如我們知道用戶選擇開(kāi)始元素和偏移量，以及結(jié)束元素以及偏移量，那么我們可以用下面的例子把用戶選擇的內(nèi)容用js給標(biāo)記起來(lái)
復(fù)制代碼 代碼如下:
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下，需要關(guān)聯(lián)多個(gè)元素的選擇時(shí)候，我們需要?jiǎng)?chuàng)建兩個(gè)textRange，一個(gè)是開(kāi)始節(jié)點(diǎn)，以及偏移量，還有一個(gè)結(jié)束節(jié)點(diǎn)，以及偏移量，兩個(gè)textRange用a1.setEndPoint關(guān)聯(lián)
參考文檔：http://help.dottoro.com/ljgbbkjf.php
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
上面是我們知道開(kāi)始結(jié)束位置的情況下，那我們?nèi)绾沃烙脩糇约哼x中的熱區(qū)的開(kāi)始，結(jié)束節(jié)點(diǎn)和偏移量呢？
很可惜查了半天，MSDN只有以下幾個(gè)屬性可以利用，
textRange.parentElement返回選中熱區(qū)的父親節(jié)點(diǎn)，可以幫助我們確定，一個(gè)大概的范圍
boundingLeft,offsetLeft，可以知道熱區(qū)的左偏移距離
boundingTop,offsetTop，可以知道熱區(qū)的上偏移距離
text，選中的文本內(nèi)容，htmlText選中的html內(nèi)容
可以沒(méi)有直接的index…，和開(kāi)始節(jié)點(diǎn) 。。。之類
好吧，如果我們要通過(guò)位置來(lái)算的話，我們可以通過(guò)每行的line-height，計(jì)算高度，如果是一個(gè)節(jié)點(diǎn)的話，要計(jì)算節(jié)點(diǎn)的height,padding,marging，
如果是計(jì)算左偏移的話，要計(jì)算font-size，margin,padding,letter-space，這樣我們通過(guò)css的計(jì)算，可以得到大致的位置，
然后我們結(jié)合text，和htmlText去比對(duì)附近的元素的文本內(nèi)容，可以得到索引的坐標(biāo)
這樣 基本上我們可以確定開(kāi)始/結(jié)束節(jié)點(diǎn)，以及偏移量了，
不過(guò)這樣做的成本也是比較高的，不知道大家還有沒(méi)有好的辦法，或者h(yuǎn)acker的方法^_^
==================================================================================
剛才又看了下htmlText方法，有個(gè)驚奇的發(fā)現(xiàn)，還是上面的例子，htmlText返回如下
DIV id=srche Isource/I element./DIV
DIV id=src1The Bcontents/B of the Isource/I element/DIV【已補(bǔ)全 IE6,IE7,IE8下使用Javascript記錄光標(biāo)選中范圍】可以看到開(kāi)始節(jié)點(diǎn)的tagName，還有選中的內(nèi)容，可以通過(guò)去掉開(kāi)頭結(jié)尾的html tag，然后用正則判斷取到這段html代碼在之前的parent.innerHTML的位置，這樣偏移量也就取到了，ok，不需要通過(guò)判斷offset的方式，我們就可以取到開(kāi)始，結(jié)束節(jié)點(diǎn)，以及偏移量了
這樣在IE6,7,8下，可以記錄用戶任意選中的內(nèi)容的開(kāi)始、結(jié)束節(jié)點(diǎn)，以及偏移量了^_^

=============================================================
只是這樣做，還有一個(gè)唯一的缺點(diǎn)就是對(duì)于單個(gè)字符，或者重復(fù)出現(xiàn)的單詞，還是得通過(guò)css的offsetLeft 這樣的屬性，通過(guò)判斷距離，還確定是否是選中的那個(gè)，不知道大家有沒(méi)好的建議

===============================================================
然后今天早上，今天靈光一現(xiàn)，互發(fā)奇想，解決不需要通過(guò)offsetTop,left判斷單個(gè)node內(nèi)部，重復(fù)字符的偏移量問(wèn)題

推薦閱讀