网页中光标在input中的定位

青旅半醒 2022-04-14 02:26 794阅读 0赞

转自：http://zhujinguo.iteye.com/blog/765929  
  
IE下的Range操作比Mozilla下强很多，这里只讨论IE下的操作。  
这里选介绍几个光标定位的特点：  
1.光标不变  
直接obj.focus()，光标会返回之前的位置，即位置不变  
2.光标在最前  
var r = obj.createTextRange();  
r.collapse();  
r.select();  
用这个方法可以使光标在input框最前面  
3.光标在最后 var r = obj.createTextRange();  
r.collapse(false);  
r.select();  
用这个方法可以使光标停在input框的最后  
4.选取input框中部分内容需要用到Range的moveStart或moveEnd方法, 其详细的方法使用可以参考MSDN.  
<script type="text/javascript">  
function sl(o, m, n)\{  
var rt = o.createTextRange();  
rt.collapse();  
rt.select();//光标置最前  
var r = document.selection.createRange();  
r.collapse(false);  
r.moveStart("character", m);//从m位开始  
r.moveEnd("character", n);//选取n位  
r.select();  
\}  
</script>  
<input name="a" value="123456789"><input type=button value="select" οnclick="sl(a,2,4)">  
  
5.再引申一下光标的移动和位置，这个是有人经常问到的问题 <input name=a value="123456789">  
<input type=button value="向前" οnclick="setpos(a,-1)">  
<input type=button value="向后" οnclick="setpos(a,1)">  
<input type=button value="当前光标的位置" οnclick="getpos(a)">  
<script type="text/javascript">  
function setpos(obj,n)  
\{  
obj.focus();  
var r = document.selection.createRange();  
r.collapse(false);  
r.move("character", n);  
r.select();  
\};  
function getpos(obj)  
\{  
obj.focus();//光标位置不变  
var r = document.selection.createRange();  
r.collapse(false);  
r.setEndPoint("StartToStart", obj.createTextRange());  
alert(r.text.length);  
\};  
</script>