createTextRange()的使用示例介紹

 這篇文章主要介紹了createTextRange()的使用示例,需要的朋友可以參考下

代碼如下: <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" onclick="test()" value="text">  <input type="button" onclick="test1()" value="htmlText">    獲取指定文本框中的選中的文字：只響應第一個文本框  代碼如下: <input id="inp1" type="text" value="1234567890">  <input id="inp2" type="text" value="9876543210">  <input type="button" onclick="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" onclick=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" onfocus="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="得到光標位置" onclick=getPos(txt1)>    控制input框內光標位置   代碼如下: <script language="javascript">  function setPos(num)  {  text1.focus();  var e =document.getElementById("text5");  var r =e.createTextRange();  r.moveStart('character',num);  r.collapse(true);  r.select();  }  </script>  <input type="text" id="text5" value="1234567890">  <select onchange="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 onchange="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="<" onclick=go(-1)>  <input id="demo" value="這裡是文字">  <input type="button" value=">" onclick=go(1)>  <script language="javascript">  function go(n){  demo.focus();  with(document.selection.createRange())  {  moveStart("character",n);  collapse();  select();  }  }  </script>