获取输入框焦点

最新推荐文章于 2025-04-14 16:10:33 发布

原创最新推荐文章于 2025-04-14 16:10:33 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#定位 #javascript #js #jquery #web

本文介绍了在前端开发中如何实现表单输入时自动将光标定位到第一个输入框，并在用户按下回车键时自动切换到下一个输入框。通过原生JavaScript和jQuery方法展示了获取DOM焦点和选择文字的实现，同时也提及了EasyUI Combobox的焦点获取。此外，提供了一个示例代码，展示如何监听回车事件并实现输入框间的焦点切换，以及在达到最后一个输入框时触发保存操作。

在前端页面中我们经常会用到的表单输入，在打开表单页面时，我们希望可以输入光标可以自动定位到第一个输入框，用户就可以直接输入内容了，获取dom对象焦点，一般有两种方式

原生js获取焦点

document.getElementById("eleID").focus();//获取焦点
document.getElementById("eleID").select();//选择文字

Jquery获取焦点

$(“#eleID”).focus();
$(“#eleID”).select();

Easyui combobox 获取焦点

$('#eleID').combobox('textbox').focus();

表单输入框回车事件自动切换到下一个输入框

示例代码

//回车自动切换到下一个输入框
$("form[name='formName'] input:text").keypress(function (e) {
    if (e.which == 13) {// 判断所按是否回车键
        var inputs = $("form[name='formName']").find(":text"); // 获取表单中的所有输入框
        var idx = inputs.index(this); // 获取当前焦点输入框所处的位置
        if (idx == inputs.length - 1) {// 判断是否是最后一个输入框
            $('#saveBtn').click();//点击保存按钮
            inputs[0].focus();
            inputs[0].select();
        } else {
            inputs[idx + 1].focus(); // 设置焦点
            inputs[idx + 1].select(); // 选中文字
        }
    }
}