Use Javascript to record the cursor selected range under IE6, IE7, and IE8 (completed)_javascript skills

刚和同事讨论了一个很有趣的问题，有个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返回如下

 

he source element.

The contents of the source element

You can see the tagName of the start node and the selected content. You can remove the html tag at the beginning and end, and then use regular rules to determine the position of this html code in the previous parent.innerHTML, so that the offset is also Just got it, ok, we don’t need to judge the offset, we can get the start, end node, and offset

In this way, under IE6, 7, and 8, the start and end nodes and offsets of the content selected by the user can be recorded^_^

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

The only disadvantage of just doing this is that for a single character or a repeated word, you still have to use the offsetLeft attribute of CSS to determine whether it is the selected one by judging the distance. I don’t know if you have any Bad advice

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

Then this morning, we had a flash of inspiration and exchanged ideas to solve the problem of the offset of repeated characters inside a single node without using offsetTop and left.

The code is as follows

Copy the code The code is as follows:

<script> <br>function mark() { <br>var selection=document.selection.createRange(); <br>if(selection.text.length==0){ <br>return; <br>} <br>var textLength=event.srcElement.innerText.length; <br>var oldSelectionParent=selection.parentElement(); <br>do{ <br>selection.moveEnd("character",1); <br>}while (selection.parentElement()==oldSelectionParent); <br>selection.moveEnd("character",-1); <br>alert(textLength - selection.text.length); <br>} <br>function load( ){ <br>document.body.onmouseup=mark; <br>//document.body.onmousedown=mark; <br>} <br></script>

< ;body onload="load()">

飞a a a a 飞飞飞飞飞a a a a

The principle is to use the method of continuously shifting 1 character inside a node to the bottom or top to calculate the offset, because for the hot area within a single element, its parentElement() returns itself. If it spans multiple node, after that, the returned parentNode is its own parent node. You can use this change to determine whether to move to the end of the node text. ^_^In this way, the offset can be calculated




ok. In summary, the htmlText attribute can solve the problem of positioning hot spots in multi-node selections. For single-node internal duplication Characters can be solved through the last part of the code in the article, so that under IE, the method of recording the cursor selected position and reproducing it is perfect ^_^


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

I went to the kissy group and asked, and it turned out that Chengyu I have made a fully compatible code to get the position, the link is as follows
http://www.jb51.net/article/28120.htm

Code: http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html