IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）
刚和同事讨论了一个很有趣的问题，有个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
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内部，重复字符的偏移量问题
<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群问了下，原来承玉已经做过全兼容的取位置的代码，链接如下
http://www.jb51.net/article/28120.htm
代码：http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html
相关推荐
-
JS限制条件补全问题实例分析
本文实例分析了JS限制条件补全问题.分享给大家供大家参考,具体如下: 题目一.a和b两个变量,不用第三个变量来切换两个变量值 var a=5; var b=6; a=a+b; b=a-b; a=a-b; alert(a); alert(b); 题目二.有一个数n=5,不用for循环,怎样返回[1,2,3,4,5]这样的数组 方法一.用递归来进行遍历 var n=5; function show(){ var arr=[]; return (function(){ arr.unshift(n);
-
JS经典正则表达式笔试题汇总
本文实例总结了JS经典正则表达式笔试题.分享给大家供大家参考,具体如下: 一.复习字符串的传统操作 如何获取一个字符串中的数字字符,并按数组形式输出,如 dgfhfgh254bhku289fgdhdy675gfh 输出[254,289,675] 分析:循环用charAt()的方法获取到每一个子字符串,判断他是不是在0~9之间,是就把他扔到准备好的数组里 var str="dgfhfgh254bhku289fgdhdy675gfh"; findNum(str); function fin
-
js自动闭合html标签(自动补全html标记)
复制代码 代码如下: <script type="text/javascript"> // Close HTML Tags -------------------------------------------- function closeHTML(str){ var arrTags=["span","font","b","u","i","h1",&qu
-
JavaScript常见的五种数组去重的方式
大致介绍 JavaScript的数组去重问题在许多面试中都会遇到,现在做个总结 先来建立一个数组 var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN]; 第一种 思路:建立一个临时数组,用for循环去依次判断arr中的每个项在临时数组中是否有相同的值,如果没有则将这个值添加到临时数组,如果有相同的值则不添加,最后返回这个临时数组 代码: Array.prototype.removeDuplicate = function(){ var n = []; for
-
javascript仿百度输入框提示自动下拉补全
本文实例讲解了javascript输入框自动下拉补全操作,仿百度.谷歌搜索框提示,具体内容如下 效果图: 具体代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
-
JavaScript利用正则表达式替换字符串中的内容
话不多说,请看具体实现代码 //从字符串'Is this all there is'中剪去'is': var str='Is this all there is'; var subStr=new RegExp('is');//创建正则表达式对象 var result=str.replace(subStr,"");//把'is'替换为空字符串 console.log(result);//Is th all there is var subStr=new RegExp('is','i');
-
JS数组排序方法实例分析
本文实例讲述了JS数组排序方法.分享给大家供大家参考,具体如下: 方法一.冒泡排序 思路:依次比较数组中的第一个元素和第二个元素,如果第一个元素大于第二个元素,则交换位置,所以需要两个函数:交换位置函数和比较函数 比较轮数为数组长度 var arr=[2,58,49,26,34]; function change(f,s){ var temp=arr[f]; arr[f]=arr[s]; arr[s]=temp; } for(var i=0;i<arr.length;i++){ for(var
-
javascript数组去重方法分析
本文实例讲述了javascript数组去重方法.分享给大家供大家参考,具体如下: 方法一. 思路:创建一个新的空数组,循环遍历旧数组,用indexOf()方法,可以取得元素在数组中的位置,如果值为-1表示不存在.那么新数组用indexOf去获取老数组的每一个元素,如果值为-1表示不存在,就把他push到新数组里,最后输出新数组即去重后的数组 var arr=[24,56,74,89,24,56,78,09,24]; var new_arr=[]; for(var i=0;i<arr.length
-
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
本文实例总结了javascript中数组(Array)对象和字符串(String)对象的常用方法.分享给大家供大家参考,具体如下: 综述:笔者经常将数组的方法和字符串的方法混淆,这里写篇日志,做个区分 1.字符串对象 String是JavaScript中的五种基本类型之一. (1)字符串对象的创建 例1: var str="Hello world"; 或者 var str=new String("Hello world") (2)charAt()方法 charAt(
-
Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)
废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na
-
遍历js中对象的属性和值的实例
今天优化项目时,遇到了关于"遍历js中对象的属性和值"的需求.之所以会有这个需求,是因为要做一个局部刷新表格内容的js插件.刚开始我去网上荡了一个js分页插件,但是智商实在捉急,搞了半天没搞出来!后来就怒了,干脆自己写一个好了.结果就遇到了这个问题! 问题:通过遍历属性名数组,获取对象的属性值失败 刚开始的错误代码如下: for(var i=0;i<dataList.length;i++) { var dataLine="<tr>"; for(va
-
JSP + ajax实现输入框自动补全功能 实例代码
下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();