复制代码 代码如下:
<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群问了下,原来承玉已经做过全兼容的取位置的代码,链接如下
https://www.jb51.net/article/28120.htm
代码:http://lite-ext.googlecode.com/svn/trunk/lite-ext/playground/range/ie.html
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。