Javascriptを使用してIE6、IE7、IE8でのカーソル選択範囲を記録する（完了）_javascriptスキル

刚和同事讨论了一个很有趣的问题，有个idea，需要记录用户在页面选中的内容，在ff和ie9下有w3c的dom2级事件createRange，这里不再累赘。主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择开始元素和偏移量，以及结束元素以及偏移量，那么我们可以用下面的例子把用户选择的内容用js给标记起来

<script> <br>function mark() { <br>var b= document.getElementById ("b"); <br>var b1= document.getElementById ("b1"); <br>var b2= document.getElementById ("b2"); <br>var a1 = document.body.createTextRange(); <br>a1.moveToElementText(b); <br>a1.moveStart('character',17); <br>var a2 = document.body.createTextRange(); <br>a2.moveToElementText(b1); <br>a2.moveEnd('character',-2); <br>a1.setEndPoint ("EndToEnd",a2); <br>a1.select(); <br>}</script>

The contents of the source element.

The contents of the source element.

The contents of the source element.

Mark

ok，从上面的代码，我们可以知道，在IE6,7,8下，需要关联多个元素的选择时候，我们需要创建两个textRange，一个是开始节点，以及偏移量，还有一个结束节点，以及偏移量，两个textRange用a1.setEndPoint关联

参考文档：http://help.dottoro.com/ljgbbkjf.php

http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.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返回如下

開始ノードの tagName と選択したコンテンツが表示されます。先頭と末尾の html タグを削除し、通常のルールを使用して、前のparent.innerHTML 内のこの HTML コードの位置を決定します。オフセットもそうです。わかりました。オフセットを判断する必要はありません。開始ノード、終了ノード、オフセットを取得できます。

このようにして、IE6、7、8 では、ユーザーが選択したコンテンツの開始ノードと終了ノードとオフセットを記録できます^_^

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

これを行うことの唯一の欠点は、単一の文字または繰り返される単語の場合、CSS の offsetLeft 属性を使用して距離を判断して選択されたものであるかどうかを判断する必要があることです。悪いアドバイスがあります

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

そして今朝、私たちはひらめきがあり、offsetTop と left を使用せずに単一ノード内で繰り返される文字のオフセットの問題を解決するためのアイデアを交換しました。

コードは次のとおりです