快捷導(dǎo)航

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

更新時(shí)間：2011年08月28日 18:35:17 作者：

IE6,7,8下使用Javascript記錄光標(biāo)選中范圍（已補(bǔ)全）（已解決單個(gè)節(jié)點(diǎn)內(nèi)部重復(fù)字符的問題）

剛和同事討論了一個(gè)很有趣的問題，有個(gè)idea，需要記錄用戶在頁面選中的內(nèi)容，在ff和ie9下有w3c的dom2級事件createRange，這里不再累贅。主要問題是在IE6,7,8只能通過createTextRange選中熱區(qū)。假如我們知道用戶選擇開始元素和偏移量，以及結(jié)束元素以及偏移量，那么我們可以用下面的例子把用戶選擇的內(nèi)容用js給標(biāo)記起來

復(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 <b>contents</b> of the <i>source</i> element.</div> 
<div id="b1">The <b>contents</b> of the <i>source</i> element.</div> 
<div id="b2">The <b>contents</b> of the <i>source</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è)是開始節(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%28VS.85%29.aspx

上面是我們知道開始結(jié)束位置的情況下，那我們?nèi)绾沃烙脩糇约哼x中的熱區(qū)的開始，結(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)容

可以沒有直接的index…，和開始節(jié)點(diǎn)。。。之類

好吧，如果我們要通過位置來算的話，我們可以通過每行的line-height，計(jì)算高度，如果是一個(gè)節(jié)點(diǎn)的話，要計(jì)算節(jié)點(diǎn)的height,padding,marging，

如果是計(jì)算左偏移的話，要計(jì)算font-size，margin,padding,letter-space，這樣我們通過css的計(jì)算，可以得到大致的位置，

然后我們結(jié)合text，和htmlText去比對附近的元素的文本內(nèi)容，可以得到索引的坐標(biāo)

這樣基本上我們可以確定開始/結(jié)束節(jié)點(diǎn)，以及偏移量了，

不過這樣做的成本也是比較高的，不知道大家還有沒有好的辦法，或者h(yuǎn)acker的方法^_^

==================================================================================

剛才又看了下htmlText方法，有個(gè)驚奇的發(fā)現(xiàn)，還是上面的例子，htmlText返回如下

<DIV id=src>he <I>source</I> element.</DIV>
<DIV id=src1>The <B>contents</B> of the <I>source</I> element</DIV>

可以看到開始節(jié)點(diǎn)的tagName，還有選中的內(nèi)容，可以通過去掉開頭結(jié)尾的html tag，然后用正則判斷取到這段html代碼在之前的parent.innerHTML的位置，這樣偏移量也就取到了，ok，不需要通過判斷offset的方式，我們就可以取到開始，結(jié)束節(jié)點(diǎn)，以及偏移量了

這樣在IE6,7,8下，可以記錄用戶任意選中的內(nèi)容的開始、結(jié)束節(jié)點(diǎn)，以及偏移量了^_^

=============================================================

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

===============================================================

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

代碼如下

復(fù)制代碼代碼如下:

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

原理就是利用在一個(gè)節(jié)點(diǎn)內(nèi)部，不斷偏移1個(gè)字符，到底部或者頂部，計(jì)算偏移量的方法，因?yàn)閷τ趩蝹€(gè)元素內(nèi)的熱區(qū)，他的parentElement()返回就是他自己，如果跨多個(gè)節(jié)點(diǎn)，之后，返回的parentNode就是他自己的父節(jié)點(diǎn)了，可以通過這個(gè)變化，判斷，是否移動(dòng)到該節(jié)點(diǎn)文本的盡頭。^_^這樣就可以計(jì)算偏移量了

ok，總結(jié)，通過htmlText的屬性可以解決多節(jié)點(diǎn)選中熱區(qū)的定位問題，對于單節(jié)點(diǎn)內(nèi)部重復(fù)字符，可以通過文中最后一部分代碼解決，這樣在IE下，記錄光標(biāo)選中位置，和復(fù)現(xiàn)的方法就完美了^_^

============================================

去kissy群問了下，原來承玉已經(jīng)做過全兼容的取位置的代碼，鏈接如下
http://m.fzitv.net/article/28120.htm

代碼：http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html

您可能感興趣的文章:

光標(biāo)選中范圍

相關(guān)文章

如何在JavaScript中進(jìn)行深度克隆
JavaScript中深度克隆是指創(chuàng)建一個(gè)對象的完整副本,并且副本中所有的嵌套對象也被復(fù)制,而不是只是引用原始對象中的嵌套對象,下面我們就來了解下深度克隆的具體實(shí)現(xiàn)吧
2024-12-12
JAVASCRIPT實(shí)現(xiàn)的WEB頁面跳轉(zhuǎn)以及頁面間傳值方法
在WEB頁面中，我們實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用戶點(diǎn)擊某處，然后直接由瀏覽器幫我們跳轉(zhuǎn)。
2010-05-05
很少有人對JavaScript的面向?qū)ο筇匦赃M(jìn)行系統(tǒng)的分析。我希望接下來的文字讓你了解到這個(gè)語言最少為人知的一面。
2009-12-12

原生JS獲取元素的位置與尺寸實(shí)現(xiàn)方法

下面小編就為大家?guī)硪黄鶭S獲取元素的位置與尺寸實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

2017-10-10

利用純JS實(shí)現(xiàn)像素逐漸顯示的方法示例

這篇文章主要給大家介紹了利用純JS實(shí)現(xiàn)像素逐漸顯示的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

2017-08-08