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


Posted in Javascript onAugust 28, 2011

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

<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

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
js Dialog 实践分享
Oct 22 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
range 标准化之获取
Aug 28 #Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 #Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 #Javascript
You might like
php实现memcache缓存示例讲解
2013/12/04 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
destoon各类调用汇总
2014/06/20 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
设备售后服务承诺书
2014/05/30 职场文书
任命书格式
2014/06/05 职场文书
质量提升方案
2014/06/16 职场文书
社区敬老月活动总结
2015/05/07 职场文书
经济纠纷起诉状
2015/05/20 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis