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

 

 

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

 

Js代码 

1. <input id="inp1" type="text" value="1234567890">      
2. <input id="inp2" type="text" value="9876543210">      
3. <input type="button" onclick="test()" value="确定">      
4. <script language="javascript">      
5. function test()      
6. {      
7. var o=document.getElementByIdx_x("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" 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>    

 

 

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

 

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" onfocus="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="得到光标位置" onclick=getPos(txt1)>    

 

 

 

控制input框内光标位置

 

Js代码 

1. <script language="javascript">      
2. function setPos(num)      
3. {      
4. text1.focus();      
5. var e =document.getElementByIdx_x("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 onchange="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 onchange="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="<" onclick=go(-1)>       
2. <input id="demo" value="这里是文字">      
3. <input type="button" value=">" 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>    

 

 

取光标位置

 

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

 

 

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

 

Js代码 

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 onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。>    
32. <br>    
33. <input type=text name=aText size=80 value=我要在光标处插入这些文字><br>   
34. <input type=button value=我要在光标处插入上面文本框里输入的文字！ onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">   
35. <input type=button value=删除选中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>   
36. </FORM>