text和textarea中的range处理

最新推荐文章于 2022-02-15 09:52:28 发布

iteye_20002

最新推荐文章于 2022-02-15 09:52:28 发布

阅读量299

点赞数

分类专栏： web开发文章标签： jQuery HTML ViewUI

web开发专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在文本输入框中使用JavaScript控制光标位置的方法，特别是如何通过编程手段将光标移动到文本的末尾，对于网页表单开发有一定的实用价值。

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

1,在text中按后退键,然后得到光标位置后，光标会移动到text的最前面,为了移动到文本的最后面,
加了4行代码(见注释)。这里并没有彻底搞明白，先立此存照。
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=GBK">
       <script src="../pub/jquery/jquery.pack.js"></script>
       <script>
     function getTextCaretPos(textObj){
        var curRange = document.selection.createRange();
        var tbRange = textObj.createTextRange();
        tbRange.collapse(true);
        tbRange.select();
        var headRange = document.selection.createRange();
        headRange.setEndPoint("EndtoEnd", curRange);
        var pos = headRange.text.length;
        return pos;
    }

    jQuery(document).ready(function(){
       jQuery('#test').keyup(function(event){
switch(event.keyCode){
case 8:
$('#pos').html(getTextCaretPos($('#test').get(0)));
//以下4行移动光标到文本最后面
   $('#test')[0].focus();
    var rng =$('#test')[0].createTextRange();
    rng.collapse(false);
    rng.select();
    break;
}
}
   );
    }
    );
</script>
   </head>
   <body>
       <input id='test'>
       pos:
       <span id='pos'></span>
   </body>
</html>