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

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

标签: 光标 input jquery
作者:洋洋电脑帮 | 发布时间:2025-03-30 19:06:38 | 阅读:2 | 评论: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代码比较简洁,理解简单,建议使用。

为了给您带来更好的浏览体验,我日夜打磨网站。若您喜欢这里的内容,不妨用打赏为我点赞。您的每一分支持,我都将化作持续创作的热情,为您呈上更多优质内容。
微信
支付宝
评论区




登录页面验证码图片