javascript中createTextRange用法(focus)

createtextrange createrange区别:

对象或元素不同，虽然都是返回TextRange。例如：

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

document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange，Range -- 范围

 

返回createTextRange的text和htmlText

 

Js代码 

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" οnclick="test()" value="text">     
14. <input type="button" οnclick="test1()" value="htmlText">    

 

 

获取指定文本框中的选中的文字：只响应第一个文本框

 

Js代码 

1. <input id="inp1" type="text" value="1234567890">     
2. <input id="inp2" type="text" value="9876543210">     
3. <input type="button" οnclick="test()" value="确定">     
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>    

 

 

页面文本倒序查找

 

Js代码 

1. abababababababa     
2. <input value="倒序查找a" οnclick=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>    

 

 

聚焦控件后把光标放到最后

 

Js代码 

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://toto369.net" οnfοcus="setFocus()">    

 

 

得到文本框内光标位置

 

Js代码 

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="1234567890">     
10. <input type="button" value="得到光标位置" οnclick=getPos(txt1)>    

 

 

 

控制input框内光标位置

 

Js代码 

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="1234567890">     
13. <select οnchange="setPos(this.selectedIndex)">     
14. <option value="0">0</option>     
15. <option value="1">1</option>     
16. <option value="2">2</option>     
17. <option value="3">3</option>     
18. <option value="4">4</option>     
19. <option value="5">5</option>     
20. <option value="6">6</option>     
21. <option value="7">7</option>     
22. </select>    

 

 

 

选中文本框中的一段文字

 

Js代码 

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="1234567890">     
12. <select οnchange="sel(text1,this.value)">     
13. <option value="0">0</option>     
14. <option value="1">1</option>     
15. <option value="2">2</option>     
16. <option value="3">3</option>     
17. <option value="4">4</option>     
18. <option value="5">5</option>     
19. <option value="6">6</option>     
20. <option value="7">7</option>     
21. </select>    

 

 

 

控制文本框内光标的移动

 

Js代码 

1. <input type="button" value="<" οnclick=go(-1)>      
2. <input id="demo" value="这里是文字">     
3. <input type="button" value=">" οnclick=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>    

 

 

取光标位置

 

Js代码 

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 οnclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf    

 

 

       在文本框中设置内容后，在将选定的文本删除

 

Js代码 

1. 1. <script>   
   2.   function storeCaret (textEl) {  
   3.       
   4.     if (textEl.createTextRange)   
   5.     textEl.caretPos = document.selection.createRange().duplicate();   
   6.     
   7.   }  
   8.     
   9.   function insertAtCaret (textEl, text) {  
   10.     
   11.     if (textEl.createTextRange && textEl.caretPos) {  
   12.     var caretPos = textEl.caretPos;  
   13.     caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;   
   14.   } else   
   15.     textEl.value = text;  
   16.   }   
   17.     
   18.   function deleteAtCaret (textEl) {  
   19.     
   20.     if (textEl.createTextRange && textEl.caretPos) {  
   21.     var caretPos = textEl.caretPos;  
   22.     document.selection.clear();  
   23.   }  
   24.   
   25.   //alert(aForm.aTextArea.   
   26.   }   
   27.   
   28. </script>   
   29.   
   30. <form name=aForm>  
   31. <input name=aTextArea size=120 wrap=soft οnselect="storeCaret(this);" οnclick="storeCaret(this);" οnkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。>   
   32. <br>   
   33. <input type=text name=aText size=80 value=我要在光标处插入这些文字><br>  
   34. <input type=button value=我要在光标处插入上面文本框里输入的文字！ οnclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">  
   35. <input type=button value=删除选中文字 οnclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>  
   36. </FORM>   

转载于:https://www.cnblogs.com/wayne173/p/3746177.html