浏览器Range,Selection等选中文本对象

Range对象

Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。

最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。

如果一个实现支持 Range 模块，那么document就定义了createRange()方法调用它可创建新的 Range 对象。

注意：IE 定义了不兼容的 Document.createRange() 方法，它返回的对象与 Rang 接口相似，但不兼容。docment.createTextRange();

Range 接口为指定文档“选中”的区域定义了大量的方法，此外还有几个方法可以用于在选中的区域中进行剪切和粘贴类型的操作。Range 接口的属性提供了获取范围的边界节点和偏移量的方法。它的方法提供了设置范围边界的方法。注意，范围的边界可以设置为Document 或 DocumentFragment 对象中的节点。一旦定义了范围的边界点，就可以使用 deleteContents()、extractContents()、cloneContents() 和 insertNode() 方法实现剪切、复制和粘贴的操作。

获得用户选择内容User selection

var userSelection;
if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
    userSelection = document.selection.createRange();
}

Selection 是继承了Range对象,

从Selection对象创建Range对象

var getRangeObject = function(selectionObject) {
    if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
    else { // 较老版本Safari!
        var range = document.createRange();
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
        return range;
    }
}
var rangeObject = getRangeObject(userSelection);

给Selection对象添加Range

window.getSelection().addRange();

这个功能可以帮用户自动选中，很有用。 IE里面对象大多支持select(),方法,直接选中。

应用

<script type="text/javascript">
function selectText() {
    if (document.selection) {
　　　　　//IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById('selectable'));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById('selectable'));
        window.getSelection().addRange(range);
    }
}
</script>
<span id="selectable">点击后选中</span> 
<input type="button" onclick="selectText()" value="点我" />

 

复制到剪贴板

<script>
  window.onload = function() {
 
    var range = document.createRange();
    var a = document.getElementsByTagName('a')[0];
    range.selectNode(a);
    window.getSelection().addRange(range);
     
  }

  function copy() {
    var copy = document.execCommand('copy');
    console.dir(copy);
  }
  </script>
</head>

<body>
  <button onclick="copy()">sssss</button>
  <a href="http://www.baidu.com"><span style="font-size:0">http://www.baidu.com</span>百度</a>
   
  <input type="text">
</body>

IE的话

window.clipboardData.setData("Text",clipBoardContent);

 

posted @ 2016-12-23 15:21  btg.yoyo  阅读(3366)  评论(0)  编辑  收藏  举报