【洋洋电脑帮】博客主要分享生活中的经历经验和IT运维工作、计算机自学过程中遇到的问题及解决办法,还分享好用的【软件和各种资源】等。坚持+自律=开挂人生。

jquery中,input获得焦点时光标自动定位到文字后面

标签: 光标 input jquery
作者:洋洋电脑帮 | 发布时间:2025-03-30 19:06:38 | 阅读:46 | 评论:0

在编辑有值得input输入框时,光标总是自动定位到第一位。为了提高编辑效率,想实现当input获得焦点后,利用js将光标自动定位到input中文字的最后面。

实现方法一

html代码

<input id="test" type="text" />

jquery代码

var value=$("#test").val();
$("#test").val("").focus().val(value);

实现方法二

目的:利用contenteditable=”true”模拟输入框时,focus()方法会将光标定位在文本的首位,需要将光标挪到最后一位。

实现代码:

function setFocus(el) {
    el = el[0]; // jquery 对象转dom对象  
    el.focus();
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    //判断光标位置,如不需要可删除
    if(sel.anchorOffset!=0){
        return;
    };
    sel.removeAllRanges();
    sel.addRange(range);
}

两种方法都能实现将光标定位到文字的最末位,但是对比,第一个jquery代码比较简洁,理解简单,建议使用。

熬夜排查故障时我在写文章,周末休息时我在录教程。您的打赏不仅是一份鼓励,更是让我知道:这些用头发换来的经验,真的值得。
微信
支付宝
评论区




登录页面验证码图片