HTML5编辑API之Range对象

  • 内容
  • 评论
  • 相关

Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下:

var  range = document.createRange();

在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象;

var  selection = document.getSelection();     或者

var  selection  = window.getSelection();

每一个selection对象都有一个或者多个Range对象,每一个range对象代表用户鼠标所选取范围内的一段连续区域,在firefox中,可以通过ctrl键可以选取多个连续的区域,因此在firefox中一个selection对象有多个range对象,在其他浏览器中,用户只能选取一段连续的区域,因此只有一个range对象。

可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象,如下:

var range = document.getSelection().getRangeAt(index);

getRangeAt方法有一个参数index,代表该Range对象的序列号;我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容;

  1. 当用户没有按下鼠标时候,该参数的值为0.
  2. 当用户按下鼠标的时候,该参数值为1.
  3. 当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候,该参数值代表用户选取区域的数量。
  4. 当用户取消区域的选取时,该属性值为1,代表页面上存在一个空的Range对象;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>range</title>
</head>
<body>
    <script>
        function rangeTest() {
            var html;
              var  showRangeDiv=document.getElementById("showRange");
             var  selection=document.getSelection();
            if(selection.rangeCount>0){
                html="您选取了"+selection.rangeCount+">段内容<br/>"
                for(var i=0;i<selection.rangeCount;i++){
                    var range=selection.getRangeAt(i);
                    html+="第"+(i+1)+"段内容为:"+ range+"<br/>";
                }
                showRangeDiv.innerHTML=html;
            }
        }
    </script>
    Selection与Range对象的使用
    <input type="button" value="点击我" onclick="rangeTest()">
    <div id="showRange"></div>
</body>
</html>

image