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.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" 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.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 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>   
posted @ 2014-05-22 17:38  達達尼亞  阅读(1711)  评论(0)  编辑  收藏  举报