javascript 光标定位

最新推荐文章于 2025-02-14 17:56:26 发布

原创最新推荐文章于 2025-02-14 17:56:26 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #character #button #input #function #firefox

本文介绍了一段使用JavaScript实现的代码，用于在文本框中根据输入的数字移动光标位置。通过创建TextRange对象并使用move()方法，实现了光标在文本中的精确定位。此外，还讨论了不同情况下光标移动的IE和Firefox浏览器兼容性问题，并提供了选取文本框内部分内容及获取光标位置的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<mce:script type="text/javascript"></mce:script> </head> <body> <input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回操曰:“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。" size="100" /><br /> 移动光标到第<input type="text" name="txtNum" size="5" />个位置 <input type="button" name="btnMove" value="确定" onclick="moveCursor()" /> </body>

//    /*2光标放在最前面ie中OK，firefox中无效果*/
//    function moveCursor(){
//        var textTest=document.getElementsByName("txtTest");
//        var r=txtTest.createTextRange();
//        r.collapse();
//        r.select();
//    }


    /*3光标放在最后面ie中OK，firefox中无效果*/
//    function moveCursor(){
//        var textTest=document.getElementsByName("txtTest");
//        var r=txtTest.createTextRange();
//        r.collapse(false);
//        r.select();
//    }

/*4选取input框中部分内容需要用到Range的moveStart或moveEnd方法，其详细的方法使用可以参考MSDN*/
//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();
//}
<input name="a" value="12344563789" />
<input type="button" value="select" onclick="sl(a,2,4)"/>

/*5光标的移动和位置*/
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);
}

例五
    <input type="button" value="向前" onclick="setpos(a,-1)"/>
    <input type="button" value="向后" onclick="setpos(a,1)"/>
    <input type="button" value="当前光标的位置" onclick="getpos(a)" />