获取输入框焦点

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

在前端页面中我们经常会用到的表单输入,在打开表单页面时,我们希望可以输入光标可以自动定位到第一个输入框,用户就可以直接输入内容了,获取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(); // 选中文字
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值