createTextRange()的使用樣本介紹

createTextRange()的使用樣本介紹

 這篇文章主要介紹了createTextRange()的使用樣本,需要的朋友可以參考下

代碼如下:

<script language="javascript"> 

function test() 

{ 

var rng=document.body.createTextRange(); 

alert(rng.text) 

} 

function test1() 

{ 

var rng=document.body.createTextRange(); 

alert(rng.htmlText) 

} 

</script> 

<input type="button" onclick="test()" value="text"> 

<input type="button" onclick="test1()" value="htmlText"> 

 

擷取指定文字框中的選中的文字：只響應第一個文字框 

代碼如下:

<input id="inp1" type="text" value="1234567890"> 

<input id="inp2" type="text" value="9876543210"> 

<input type="button" onclick="test()" value="確定"> 

<script language="javascript"> 

function test() 

{ 

var o=document.getElementById("inp1") 

var r = document.selection.createRange(); 

if(o.createTextRange().inRange(r)) 

alert(r.text); 

} 

</script> 

 

頁面文本倒序尋找 

 代碼如下:

abababababababa 

<input value="倒序尋找a" onclick=myfindtext("a") type="button"> 

<script language ='javascript'> 

var rng = document.body.createTextRange(); 

function myfindtext(text) 

{ 

rng.collapse(false); 

if(rng.findText(text,-1,1)) 

{ 

rng.select(); 

rng.collapse(true); 

}else 

{alert("end");} 

} 

</script> 

 

聚焦控制項後把游標放到最後 

 代碼如下:

<script language="javascript"> 

function setFocus() 

{ 

var obj = event.srcElement; 

var txt =obj.createTextRange(); 

txt.moveStart('character',obj.value.length); 

txt.collapse(true); 

txt.select(); 

} 

</script> 

<input type="text" value="http://toto369.net" onfocus="setFocus()"> 

 

得到文字框內游標位置 

 代碼如下:

<script language="javascript"> 

function getPos(obj){ 

obj.focus(); 

var s=document.selection.createRange(); 

s.setEndPoint("StartToStart",obj.createTextRange()) 

alert(s.text.length); 

} 

</script> 

<input type="text" id="txt1" value="1234567890"> 

<input type="button" value="得到游標位置" onclick=getPos(txt1)> 

 

控制input框內游標位置 

 代碼如下:

<script language="javascript"> 

function setPos(num) 

{ 

text1.focus(); 

var e =document.getElementById("text5"); 

var r =e.createTextRange(); 

r.moveStart('character',num); 

r.collapse(true); 

r.select(); 

} 

</script> 

<input type="text" id="text5" value="1234567890"> 

<select onchange="setPos(this.selectedIndex)"> 

<option value="0">0</option> 

<option value="1">1</option> 

<option value="2">2</option> 

<option value="3">3</option> 

<option value="4">4</option> 

<option value="5">5</option> 

<option value="6">6</option> 

<option value="7">7</option> 

</select> 

 

選中文字框中的一段文字 

代碼如下:

<script language=javascript> 

function sel(obj,num) 

{ 

var rng=obj.createTextRange() 

var sel = rng.duplicate(); 

sel.moveStart("character", num); 

sel.setEndPoint("EndToStart", rng); 

sel.select(); 

} 

</script> 

<input type="text" id="text1" value="1234567890"> 

<select onchange="sel(text1,this.value)"> 

<option value="0">0</option> 

<option value="1">1</option> 

<option value="2">2</option> 

<option value="3">3</option> 

<option value="4">4</option> 

<option value="5">5</option> 

<option value="6">6</option> 

<option value="7">7</option> 

</select> 

 

控制文字框內游標的移動 

 代碼如下:

<input type="button" value="<" onclick=go(-1)> 

<input id="demo" value="這裡是文字"> 

<input type="button" value=">" onclick=go(1)> 

<script language="javascript"> 

function go(n){ 

demo.focus(); 

with(document.selection.createRange()) 

{ 

moveStart("character",n); 

collapse(); 

select(); 

} 

} 

</script>