IE6,IE7,IE8下使用Javascript记录光标选中范围已补全

首页 > 网络编程 > JavaScript > javascript技巧 更新日期: 2016-02-05
IE6,7,8下使用Javascript记录光标选中范围已补全已解决单个节点内部重复字符的问题
刚和同事讨论了一个很有趣的问题,有个idea,需要记录用户在页面选中的内容,在ff和ie9下有w3c的dom2级事件createRange,这里不再累赘。主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择开始元素和偏移量,以及结束元素以及偏移量,那么我们可以用下面的例子把用户选择的内容用js给标记起来
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=src>he <I>source</I> element.</DIV>
<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内部,重复字符的偏移量问题

代码如下


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
    通过本篇文章主要给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题,需要的朋友可以一起来学习本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题:分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文. var ...
  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
    最近发现各大类库都能利用xxx.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上.这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势.IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 代码如下:<!DOCTYPE html>& ...
  • ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁.ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上 ...
  • 本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
    遇到的本地图片预览的需求,IE6下可以直接从file的value获取图片路径来显示预览,IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览,至于FireFox祥看本文吧,希望可以帮助到你最近在Web项目开发过程中遇到的本地图片预览的需求,虽然最后因为其他原因没能使用,但是也算有些了解,整理出来.这里我们按浏览器分,主要包括IE6,IE ...
  • IE8下jQuery改变png图片透明度时出现的黑边
    IE8下jQuery改变png图片透明度时出现的黑边
    这些天在做一个效果,鼠标经过,PNG图片由透明变成不透明, 但是会出现黑边,晚上查了好多办法,分别对IE8设置过滤器啊等等,都不见效果.最终在热心网友的帮助下解决了问题,下面我们就来分析下png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起 ...
猜你喜欢