DHTML之-----document.selection 的 createRange
生活随笔
收集整理的這篇文章主要介紹了
DHTML之-----document.selection 的 createRange
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、document.selection 介紹
document.selection 表示當前網頁中的選中內容。
方法有：
- clear 清除選中的內容
- empty 取消選中
- createRange 返回 TextRange 或 ControlRange 對象
- createRangeCollection 不支持
屬性有：
?
- type 選中內容的類型
- typeDetail 不支持
?
二、document.selection.createRange()詳細介紹
???? document.selection.createRange() 根據當前文字選擇返回 TextRange 對象，或根據控件選擇返回ControlRange 對象。
配合 execCommand，在 HTML 編輯器中很有用，比如：文字加粗、斜體、復制、粘貼、創建超鏈接等。
?
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title>document.selection 的 createRange</title> </head> <body><div>請選中這里的部分文字。</div><div><input type="button" value="加粗" οnclick="javascript:Bold();" /></div> <script type="text/javascript" language="javascript"> <!-- function Bold() {var r = document.selection.createRange();r.execCommand("Bold"); } --> </script></body> </html>?
三、光標定位的例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>光標位置</title> <style> INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} </style> </head> <body> <table border="0" width="700" cellspacing="0" cellpadding="0"> <tr> <td width="479" rowspan="7"> 點擊 TextArea 實現光標定位 <textarea rows="7" cols="49" id="box" οnclick=tellPoint()>我怕來不及我要抱著你，直到感覺你的縐紋有了歲月的痕跡，直到視線變得模糊直到不能呼吸 為了你我愿意 動也不能動也要看著你，直到感覺你的發線有了白雪的痕跡，直到肯定你是真的直到失去力氣讓我們形影不離 如果全世界我也可以放棄，至少還有你值得我去珍惜而你在這里就是生命的奇跡 也許全世界我也可以忘記，就是不愿意失去你的消息你掌心的痣我總記得在哪里 我們好不容易我們身不由已，我怕時間太快不夠將你看仔細，我怕時間太慢日夜擔心失去你恨不得一夜之間白頭永不分離 </textarea> <script language="javascript"> function movePoint() { var pn = parseInt(pnum.value); if(isNaN(pn)) return; var rng = box.createTextRange(); rng.moveStart("character",pn); rng.collapse(true); rng.select(); returnCase(rng) } function tellPoint() { var rng = event.srcElement.createTextRange(); rng.moveToPoint(event.x,event.y); rng.moveStart("character",-event.srcElement.value.length) pnum.value = rng.text.length returnCase(rng) } function returnCase(rng) { bh.innerText = rng.boundingHeight; bl.innerText = rng.boundingLeft; bt.innerText = rng.boundingTop; bw.innerText = rng.boundingWidth; ot.innerText = rng.offsetTop; ol.innerText = rng.offsetLeft; t.innerText = rng.text; } function selectText(sp,ep) { sp = parseInt(sp) ep = parseInt(ep) if(isNaN(sp)||isNaN(ep)) return; var rng = box.createTextRange(); rng.moveEnd("character",-box.value.length) rng.moveStart("character",-box.value.length) rng.collapse(true); rng.moveEnd("character",ep) rng.moveStart("character",sp) rng.select(); returnCase(rng); } var rg = box.createTextRange(); function findText(tw) { if(tw=="") return; var sw = 0; if(document.selection) { sw = document.selection.createRange().text.length; } rg.moveEnd("character",box.value.length); rg.moveStart("character",sw); if(rg.findText(tw)) { rg.select(); returnCase(rg); } if(rg.text!=tw) { alert("已經搜索完了") rg = box.createTextRange() } } </script> 光標位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" οnclick="movePoint()" value="移動光標到指定位置"> 選擇指定范圍：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" οnclick="selectText(sbox.value,ebox.value)" value="選擇"> 選擇查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" οnclick="findText(cbox.value)" value="查找下一個并選擇"> </td> <td width="217">boundingHeight: <span id="bh"></span></td> </tr> <tr> <td width="217">boundingWidth: <span id="bw"></span></td> </tr> <tr> <td width="217">boundingTop: <span id="bt"></span></td> </tr> <tr> <td width="217">boundingLeft: <span id="bl"></span></td> </tr> <tr> <td width="217">offsetLeft: <span id="ol"></span> </td> </tr> <tr> <td width="217">offsetTop: <span id="ot"></span> </td> </tr> <tr> <td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td> </tr> </table> </body> </html>?
四、項目中用到的光標定位
//obj：要設置的對象 num：把光標設在那個位置function setFocus(obj,num) { var rng=obj.createTextRange(); rng.moveStart("character", num); rng.collapse(true); rng.select(); } //改變當前頁面的焦點 function updateCurrentPageFocus(){//如果是合訂書名var obj;<c:if test="${indexingBean.isBound==0}">obj=document.indexform.firstBookName;</c:if><c:if test="${indexingBean.isBound==1}">obj=document.indexform.boundBookName;</c:if>if(StringUtils.isBlank(obj.value)){setFocus(obj,0);}else{setFocus(obj,obj.value.length);}}?
總結
以上是生活随笔為你收集整理的DHTML之-----document.selection 的 createRange的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript 之----eval
- 下一篇： javascript 之---正则表达式