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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
vue下载二进制流图片操作
Oct 26 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Display SQL Server Version Information
2007/06/21 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Python 文件重命名工具代码
2009/07/26 Python
浅析Python多线程下的变量问题
2015/04/28 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
学生夜不归宿检讨书
2014/09/23 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
2019财务转正述职报告
2019/06/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
win10更新失败无限重启解决方法
2022/04/19 数码科技