當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

DHTML之-----document.selection 的 createRange

發布時間：2024/4/14 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">  </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 之---正则表达式