js中createTextRange用法(focus)

轉載自：http://wing123.iteye.com/blog/420022

createtextrange createrange區別:對象或元素不同，雖然都是返回TextRange。

例如：

    var r=document.body.createTextRange()
    var r=document.createRange()
 

document. createTextRange 可以對body、TEXTAREA、BUTTON創建TextRange，Range -- 範圍

返回createTextRange的text和htmlText

1. <script language="Javascript">     
2. function test()     
3. {     
4. var rng=document.body.createTextRange();     
5. alert(rng.text)     
6. }     
7. function test1()     
8. {     
9. var rng=document.body.createTextRange();     
10. alert(rng.htmlText)     
11. }     
12. </script>     
13. <input type="button" onclick="test()" value=http://www.ithao123.cn/"text">     
14. <input type="button" onclick="test1()" value=http://www.ithao123.cn/"htmlText">    

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

1. <input id="inp1" type="text" value=http://www.ithao123.cn/"1234567890">     
2. <input id="inp2" type="text" value=http://www.ithao123.cn/"9876543210">     
3. <input type="button" onclick="test()" value=http://www.ithao123.cn/"確定">     
4. <script language="javascript">     
5. function test()     
6. {     
7. var o=document.getElementById("inp1")     
8. var r = document.selection.createRange();     
9. if(o.createTextRange().inRange(r))     
10. alert(r.text);     
11. }     
12. </script>    

頁面文本倒序查找

1. abababababababa     
2. <input value=http://www.ithao123.cn/"倒序查找a" onclick=myfindtext("a") type="button">     
3. <script language ='javascript'>     
4. var rng = document.body.createTextRange();     
5. function myfindtext(text)     
6. {     
7. rng.collapse(false);     
8. if(rng.findText(text,-1,1))     
9. {     
10. rng.select();     
11. rng.collapse(true);     
12. }else    
13. {alert("end");}     
14. }     
15. </script>    

聚焦控件後把光標放到最後

1. <script language="javascript">      
2. function setFocus()      
3. {      
4. var obj = event.srcElement;      
5. var txt =obj.createTextRange();      
6. txt.moveStart('character',obj.value.length);      
7. txt.collapse(true);      
8. txt.select();      
9. }      
10. </script>      
11. <input type="text" value=http://www.ithao123.cn/"http://toto369.net" onfocus="setFocus()">    

得到文本框內光標位置

1. <script language="javascript">     
2. function getPos(obj){     
3. obj.focus();     
4. var s=document.selection.createRange();     
5. s.setEndPoint("StartToStart",obj.createTextRange())     
6. alert(s.text.length);     
7. }     
8. </script>     
9. <input type="text" id="txt1" value=http://www.ithao123.cn/"1234567890">     
10. <input type="button" value=http://www.ithao123.cn/"得到光標位置" onclick=getPos(txt1)>    

控制input框內光標位置

1. <script language="javascript">     
2. function setPos(num)     
3. {     
4. text1.focus();     
5. var e =document.getElementById("text1");     
6. var r =e.createTextRange();     
7. r.moveStart('character',num);     
8. r.collapse(true);     
9. r.select();     
10. }     
11. </script>     
12. <input type="text" id="text1" value=http://www.ithao123.cn/"1234567890">     
13. <select onchange="setPos(this.selectedIndex)">     
14. <option value=http://www.ithao123.cn/"0">0</option>     
15. <option value=http://www.ithao123.cn/"1">1</option>     
16. <option value=http://www.ithao123.cn/"2">2</option>     
17. <option value=http://www.ithao123.cn/"3">3</option>     
18. <option value=http://www.ithao123.cn/"4">4</option>     
19. <option value=http://www.ithao123.cn/"5">5</option>     
20. <option value=http://www.ithao123.cn/"6">6</option>     
21. <option value=http://www.ithao123.cn/"7">7</option>     
22. </select>    

選中文本框中的一段文字

1. <script language=javascript>     
2. function sel(obj,num)     
3. {     
4. var rng=obj.createTextRange()     
5. var sel = rng.duplicate();     
6. sel.moveStart("character", num);     
7. sel.setEndPoint("EndToStart", rng);     
8. sel.select();     
9. }     
10. </script>     
11. <input type="text" id="text1" value=http://www.ithao123.cn/"1234567890">     
12. <select onchange="sel(text1,this.value)">     
13. <option value=http://www.ithao123.cn/"0">0</option>     
14. <option value=http://www.ithao123.cn/"1">1</option>     
15. <option value=http://www.ithao123.cn/"2">2</option>     
16. <option value=http://www.ithao123.cn/"3">3</option>     
17. <option value=http://www.ithao123.cn/"4">4</option>     
18. <option value=http://www.ithao123.cn/"5">5</option>     
19. <option value=http://www.ithao123.cn/"6">6</option>     
20. <option value=http://www.ithao123.cn/"7">7</option>     
21. </select>    

控制文本框內光標的移動

1. <input type="button" value=http://www.ithao123.cn/"<" onclick=go(-1)>      
2. <input id="demo" value=http://www.ithao123.cn/"這裏是文字">     
3. <input type="button" value=http://www.ithao123.cn/">" onclick=go(1)>      
4. <script language="javascript">     
5. function go(n){     
6. demo.focus();     
7. with(document.selection.createRange())     
8. {     
9. moveStart("character",n);     
10. collapse();     
11. select();     
12. }     
13. }     
14. </script>    

取光標位置

1. <body>    
2. <div id=box>點擊textarea</div>      
3. <mce:script type="text/javascript"><!--     
4. function doit()     
5. {     
6.  var rng = event.srcElement.createTextRange();      
7.  rng.moveToPoint(event.x,event.y);      
8.  rng.moveEnd("character",event.srcElement.value.length)      
9.  box.innerText = "光標位置：" + (event.srcElement.value.length - rng.text.length)     
10. }     
11. // --></mce:script>    
12. <textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf    

       在文本框中設置內容後，在將選定的文本刪除

1. <script>   
2.   function storeCaret (textEl) {  
3.       
4.     if (textEl.createTextRange)   
5.     textEl.caretPos = document.selection.createRange().duplicate();   
6.     
7.   }  
8. Tags:

   文章來源：