页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

光标的一些操作总结

发布：dxy 字体：[增加减小] 类型：转载

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" onclick="sl(a,2,4)">

5.再引申一下光标的移动和位置，这个是有人经常问到的问题 <input name=a value="123456789">
<input type=button value="向前" onclick="setpos(a,-1)">
<input type=button value="向后" onclick="setpos(a,1)">
<input type=button value="当前光标的位置" onclick="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>