• 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>   
  • 相关阅读:
    这是一篇乖巧的草稿——vscode上传代码到代码托管平台GitHub
    性能测试基础及练习
    adb
    前端常用的设计模式
    Vue Router 路由实现原理
    XSS与CSRF区别及防范
    vue中函数的防抖节流
    axios 使用post方式传递参数，后端接受不到
    类数组转换为数组的方法
    深入理解原型，原型链的关系
  • 原文地址：https://www.cnblogs.com/wayne173/p/3746177.html
Copyright © 2020-2023  润新知