createTextRange和createRange

一、返回createTextRange的text和htmlText

 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" οnclick="test()" value="text">
14 <input type="button" οnclick="test1()" value="htmlText">

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

 1 <input id="inp1" type="text" value="1234567890">
 2 <input id="inp2" type="text" value="9876543210">
 3 <input type="button" οnclick="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>    

三、页面文本倒序查找

 1 abababababababa
 2 <input value="倒序查找a" οnclick=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>    

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

 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" οnfοcus="setFocus()">

五、得到文本框内光标位置

 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="得到光标位置" οnclick=getPos(txt1)>

六、控制input框内光标位置

 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 οnchange="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>

七、选中文本框中的一段文字

 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 οnchange="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>

八、控制文本框内光标的移动

 1 <input type="button" value="<" οnclick=go(-1)>
 2 <input id="demo" value="这里是文字">
 3 <input type="button" value=">" οnclick=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>    

 

 

 

转载于:https://www.cnblogs.com/fanglove/articles/3595718.html