【web前端】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

    <script language="javascript">     
    function test()     
    {     
    var rng=document.body.createTextRange();     
    alert(rng.text)     
    }     
    function test1()     
    {     
    var rng=document.body.createTextRange();     
    alert(rng.htmlText)     
    }     
    </script>     
    <input type="button" οnclick="test()" value="text">     
    <input type="button" οnclick="test1()" value="htmlText">    

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

<input id="inp1" type="text" value="1234567890">     
<input id="inp2" type="text" value="9876543210">     
<input type="button" οnclick="test()" value="确定">     
<script language="javascript">     
function test()     
{     
var o=document.getElementById("inp1")     
var r = document.selection.createRange();     
if(o.createTextRange().inRange(r))     
alert(r.text);     
}     
</script>  

页面文本倒序查找

    abababababababa     
    <input value="倒序查找a" οnclick=myfindtext("a") type="button">     
    <script language ='javascript'>     
    var rng = document.body.createTextRange();     
    function myfindtext(text)     
    {     
    rng.collapse(false);     
    if(rng.findText(text,-1,1))     
    {     
    rng.select();     
    rng.collapse(true);     
    }else    
    {alert("end");}     
    }     
    </script>    

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

<script language="javascript">      
function setFocus()      
{      
var obj = event.srcElement;      
var txt =obj.createTextRange();      
txt.moveStart('character',obj.value.length);      
txt.collapse(true);      
txt.select();      
}      
</script>      
<input type="text" value="http://toto369.net" οnfοcus="setFocus()"> 

得到文本框内光标位置

    <script language="javascript">     
    function getPos(obj){     
    obj.focus();     
    var s=document.selection.createRange();     
    s.setEndPoint("StartToStart",obj.createTextRange())     
    alert(s.text.length);     
    }     
    </script>     
    <input type="text" id="txt1" value="1234567890">     
    <input type="button" value="得到光标位置" οnclick=getPos(txt1)>    

控制input框内光标位置

    <script language="javascript">     
    function setPos(num)     
    {     
    text1.focus();     
    var e =document.getElementById("text1");     
    var r =e.createTextRange();     
    r.moveStart('character',num);     
    r.collapse(true);     
    r.select();     
    }     
    </script>     
    <input type="text" id="text1" value="1234567890">     
    <select οnchange="setPos(this.selectedIndex)">     
    <option value="0">0</option>     
    <option value="1">1</option>     
    <option value="2">2</option>     
    <option value="3">3</option>     
    <option value="4">4</option>     
    <option value="5">5</option>     
    <option value="6">6</option>     
    <option value="7">7</option>     
    </select>    

选中文本框中的一段文字

    <script language=javascript>     
    function sel(obj,num)     
    {     
    var rng=obj.createTextRange()     
    var sel = rng.duplicate();     
    sel.moveStart("character", num);     
    sel.setEndPoint("EndToStart", rng);     
    sel.select();     
    }     
    </script>     
    <input type="text" id="text1" value="1234567890">     
    <select οnchange="sel(text1,this.value)">     
    <option value="0">0</option>     
    <option value="1">1</option>     
    <option value="2">2</option>     
    <option value="3">3</option>     
    <option value="4">4</option>     
    <option value="5">5</option>     
    <option value="6">6</option>     
    <option value="7">7</option>     
    </select>    

控制文本框内光标的移动

<input type="button" value="<" οnclick=go(-1)>      
<input id="demo" value="这里是文字">     
<input type="button" value=">" οnclick=go(1)>      
<script language="javascript">     
function go(n){     
demo.focus();     
with(document.selection.createRange())     
{     
moveStart("character",n);     
collapse();     
select();     
}     
}     
</script>  

取光标位置

<body>    
<div id=box>点击textarea</div>      
<mce:script type="text/javascript"><!--     
function doit()     
{     
 var rng = event.srcElement.createTextRange();      
 rng.moveToPoint(event.x,event.y);      
 rng.moveEnd("character",event.srcElement.value.length)      
 box.innerText = "光标位置：" + (event.srcElement.value.length - rng.text.length)     
}     
// --></mce:script>    
<textarea οnclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

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

    <script>   
      function storeCaret (textEl) {  
          
        if (textEl.createTextRange)   
        textEl.caretPos = document.selection.createRange().duplicate();   
        
      }  
        
      function insertAtCaret (textEl, text) {  
        
        if (textEl.createTextRange && textEl.caretPos) {  
        var caretPos = textEl.caretPos;  
        caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;   
      } else   
        textEl.value = text;  
      }   
        
      function deleteAtCaret (textEl) {  
        
        if (textEl.createTextRange && textEl.caretPos) {  
        var caretPos = textEl.caretPos;  
        document.selection.clear();  
      }  
      
      //alert(aForm.aTextArea.   
      }   
      
    </script>   
      
    <form name=aForm>  
    <input name=aTextArea size=120 wrap=soft οnselect="storeCaret(this);" οnclick="storeCaret(this);" οnkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。>   
    <br>   
    <input type=text name=aText size=80 value=我要在光标处插入这些文字><br>  
    <input type=button value=我要在光标处插入上面文本框里输入的文字！ οnclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">  
    <input type=button value=删除选中文字 οnclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>  
    </FORM>