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);