码迷，mamicode.com
首页 > 编程语言 > 详细

javascript中createTextRange用法(focus)

时间：2014-05-26 20:39:08      阅读：483      评论：0      收藏：0      [点我收藏+]

标签：c   class   java   tar   ext   http   

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>   

javascript中createTextRange用法(focus),布布扣,bubuko.com

javascript中createTextRange用法(focus)

标签：c   class   java   tar   ext   http   

原文地址：http://www.cnblogs.com/wayne173/p/3746177.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！