无为清净楼资源网

javascript Range对象跨浏览器常用操作第1/2页
网络编程 2024/11/17 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

开发的功能主要涉及即时代码着色（CodeColoring）和语法提示（CodeHints）功能，稍后会总结功能开发中问题或提供源码。
以下是个人对Range对象的了解和常用操作的实例和总结：
Range对象
Range对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。
dom标准Range对象
http://www.w3school.com.cn/xmldom/dom_range.asp
在ie中使用TextRange对象
http://www.hbcms.com/main/dhtml/objects/obj_textrange.html
range对象常用的建立方法
在开发中除了上述文档中的标准建立方法，大多如下方式建立
标准dom:
var range=window.getSelection().getRangeAt(0);
ie:
var range=document.selection.createRange();
注意：标准dom是从window中获取selection对象，而ie是从document对象中获取。
标准dom range对象(以下称dom rang)和ie的TextRange对象(以下称TextRange),在操作模式上有很大区别，可以说dom range是基于dom结构控制的，TextRange是基于文本节点字节控制的，阅读下面示例会更好理解这二者的操作模式。以下所说的range对象是指在html结构中进行选择和更改（designMode=on contentEditable=true状态下）操作，在textarea中的操作比这简单，不是当前的研究环境。
range对象的具体方法和属性请查看上边列出的相关api文档，下面对实际开发过程中常用功能讲解
1.区域选择 获取区域中文本
TextRange的区域选择
TextRange对象主要使用以下方法控制区域的选择：moveStart moveEnd move
这三个函数使用相同的参数语法:fn(sUnit [, iCount])
第一个参数是指移动的单位，可以使用的参数：character（字符）、word（词）、sentence（段落）、textedit（整个编辑区）
第二个参数指移动的数量单位，负数向所在位置之前移动，正数向所在位置之后移动。
在实际开发中一般使用character，其他几个参数在中文环境和html编辑时，和预想位置有偏差。
例1：TextRange选择光标前4个字符
复制代码 代码如下:
var rg=document.selection.createRange();
rg.moveStart("character",-4);
rg.select();//显式选择文本区域，不调用此函数也可以获得选择的内容
var text=rg.text;//获得选择的文本
var htmlText=rg.htmlText;//获得选择文本的html代码

用rg.htmlText获得选择文本的html代码，但获得结果不尽人意，
如:<b>aaaa</b>bb ,当选择aabb段时，.htmlTex返回的是<b>aa</b>bb而不是aa</b>bb
其他常用位置控制函数：
collapse： 合并前后选择点，true为开始点，false为结尾点。
moveToPoint： 移动光标到坐标 moveToBookmark： 移动到书签。
dom range的区域选择
dom range对象选择区域主要以dom节点为为坐标，所有边界移动和区域选择函数都是以dom节点为参照的
setEnd()setStart()是控制范围的前边界点和后边界点位置的函数，
有两个参数，第一个参数是dom节点，第二个参数是偏移量，这个参数和TextRange.move中不同，是相对于dom节点的偏移量。
如：有文字节点node1 nodeValue是aaabbbccc,setStart(node1,3)则设置开始位置在字符a、b之间
那如何像例1一样选择光标前4个字符呢，这需要了解dom range对象的几个属性：
endContainer 包含范围的结束点的 dom节点。
endOffset endContainer 中的结束点位置。
startContainer 包含范围的开始点的 dom节点。
startOffset startContainer 中的开始点位置。
例2：dom range选择光标前4个字符
复制代码 代码如下:
var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//获得当前range strat所在节点和偏移量，计算后作为参数
//在调用setStart后即显式选择，与TextRange不同
var text=rg.toString();//获得选择文本
rg.collapse(false);//collapse函数与TextRange.collapse相同

例2中range选择范围操作适用于单一的文本内容，如果是html内容就需要进一步计算才能正确得到，总的来看dom range在复杂dom结 构中进行相对范围选择是比较麻烦的。
另外，dom range没有直接的方法获得选择内容的html代码。在html可编辑状态下可以通过surroundContents()方法用一个span之类的标签包裹住内容后再通过innerHTML获得内容，但是在选择范围边界点在html开始和结束标签内时（如：<a>123</a>边界点在a标签内）会抛出一个异常。
以下是测试用完整代码，包含例1和例2的代码和一个测试用html可编辑区。
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload=function(){
var iframeContent="";
var divContent="";
var divChange=false;
var iframeChange=false;
var $=function(s){return document.getElementById(s);}
$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>';
var fw=$("youretextarea").contentWindow;
var f=fw.document;
f.designMode = 'On';
f.contentEditable = true;
f.open();
f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</style><body><b>aaaa</b><u>bbbb</u>cccddd</body></html>');
f.close();
if(f.attachEvent){
f.attachEvent("onkeyup",fun1);
}else{
fw.addEventListener("keyup",fun1,true);
}
function fun1(){
if(f.selection){
var rg=f.selection.createRange();
rg.moveStart("character",-4);
//rg.select();//显式选择文本区域，不调用此函数也可以获得选择的内容
var text=rg.text;//获得选择的文本
var htmlText=rg.htmlText;//获得选择文本的html代码
alert(text);
}else{
var rg=fw.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//获得当前range strat所在节点和偏移量，计算后作为参数
//在调用setStart后即显式选择，与TextRange不同
var text=rg.toString();//获得选择文本
rg.collapse(false);//collapse函数与TextRange.collapse相同
alert(text);
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>

12下一页阅读全文

标签：
javascript,Range操作
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接