IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）
<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下，需要关联多个元素的选择时候，我们需要创建两个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返回如下
<DIV id=src1>The <B>contents</B> of the <I>source</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群问了下，原来承玉已经做过全兼容的取位置的代码，链接如下
https://www.jb51.net/article/28120.htm
代码：http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html
相关文章
JavaScript中深度克隆是指创建一个对象的完整副本,并且副本中所有的嵌套对象也被复制,而不是只是引用原始对象中的嵌套对象,下面我们就来了解下深度克隆的具体实现吧2024-12-12
在WEB页面中，我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用户点击某处，然后直接由浏览器帮我们跳转。2010-05-05
很少有人对JavaScript的面向对象特性进行系统的分析。我希望接下来的文字让你了解到这个语言最少为人知的一面。2009-12-12
下面小编就为大家带来一篇原生JS获取元素的位置与尺寸实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要给大家介绍了利用纯JS实现像素逐渐显示的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了Bootstrap3 多个模态对话框无法显示的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧2016-12-12
js函数使用技巧之 setTimeout(function(){},0)
setTimeout的作用是将函数推迟第二参数设定的毫秒数后再执行，如果是0，就意味着浏览器要马上执行该函数，但是浏览器解析到setTimeout，虽然会"立刻"执行2009-02-02
use jscript Create a SQL Server database
use jscript Create a SQL Server database...2007-06-06
这篇文章主要介绍了JS瀑布流实现方法,结合实例形式分析了javascript瀑布流加载图片效果的实现原理、步骤与相关操作技巧,需要的朋友可以参考下2016-12-12
最新评论