createtextrange createrange區別:物件或元素不同，雖然都是返回TextRange。

例如：

    var r=document.body.createTextRange()
    var r=document.createRange()
 

document. createTextRange 可以對body、TEXTAREA、BUTTON建立TextRange，Range -- 範圍

返回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" onclick="test()" value="text">     
14. <input type="button"
     onclick="test1()" value="htmlText">    

獲取指定文字框中的選中的文字：只響應第一個文字框

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>    

頁面文字倒序查詢

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>    

聚焦控制元件後把游標放到最後

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()">    

得到文字框內游標位置

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框內游標位置

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>    

選中文字框中的一段文字

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>    

控制文字框內游標的移動

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>    

取游標位置

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    

       在文字框中設定內容後，在將選定的文字刪除

1. <script>   
2.   function storeCaret (textEl) {  
3.     if (textEl.createTextRange)   
4.     textEl.caretPos = document.selection.createRange().duplicate();   
5.   }  
6.   function insertAtCaret (textEl, text) {  
7.     if (textEl.createTextRange && textEl.caretPos) {  
8.     var caretPos = textEl.caretPos;  
9.     caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;   
10.   } else   
11.     textEl.value = text;  
12.   }   
13.   function deleteAtCaret (textEl) {  
14.     if (textEl.createTextRange && textEl.caretPos) {  
15.     var caretPos = textEl.caretPos;  
16.     document.selection.clear();  
17.   }  
18.   //alert(aForm.aTextArea.   
19.   }   
20. </script>   
21. <form name=aForm>  
22. <input name=aTextArea size=120 wrap=soft onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=這是例子，你可以在這裡新增文字、插入文字。>   
23. <br>   
24. <input type=text name=aText size=80 value=我要在游標處插入這些文字><br>  
25. <input type=button value=我要在游標處插入上面文字框裡輸入的文字！ onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">  
26. <input type=button value=刪除選中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>  
27. </FORM>