首页 > 其他 > 详细

range基础

时间:2016-11-19 01:51:19      阅读:284      评论:0      收藏:0      [点我收藏+]
collapse这个方法是把结束位置抛弃掉,并不是简单的设置到开始位置。
结束位置被抛弃掉以后,只要没有给它重新设置位置,它就一直都会等
于开始位置。即使你修改了开始位置,结束位置还是会在修改后的开始位置上。


selection=getSelection();
range=document.createRange();

selection是能看到的选区,range是多个选区片段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:600px;border:1px solid red;}
</style>

<script>
function selectRange(){
//变量初始化
var editor,selection,range,s;
editor=document.getElementById("editor");
s=editor.childNodes;
selection=getSelection();
range=document.createRange();
//设置range的开始和结束点
range.setStart(s[2],0);
range.setEnd(s[3],0);
//移除selection中原有的所有range
selection.removeAllRanges();
//把这个新的range添加到selection中
selection.addRange(range);

console.log("开始对象",selection.anchorNode);
  console.log("开始位置",selection.anchorOffset);
  console.log("结束对象",selection.focusNode);
  console.log("结束位置",selection.focusOffset);
}
</script>
</head>

<body>
<div contenteditable="true" id="editor">
  金樽清酒斗十千,玉盘珍馐值万钱。<br/>
  停杯投箸不能食,拔剑四顾心茫然。<br/>
  欲渡黄河冰塞川,将登太行雪满山。<br/>
  闲来垂钓碧溪上,忽复乘舟梦日边。<br/>
  行路难!行路难!多歧路,今安在?<br/>
  长风破浪会有时,直挂云帆济沧海。<br/>
</div>
<button onclick="selectRange()">select</button>
</body>
</html>

 

range基础

原文:http://www.cnblogs.com/znsongshu/p/6079390.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!