首页 jQuery jQuery input输入框点击回车切换到下一个输入框功能

jQuery input输入框点击回车切换到下一个输入框功能

在操作多input输入框的时候,输入完成顺便一个回车键切换到下一个输入框是很方便的事情

相关软件及版本

jQuery:3.6.0

谷歌浏览器:115.0.5790.114

WebStorm:2023.2

相关原理

捕获回车按键,从当前input的焦点切换到下一个input输入框的焦点

容易犯的问题

有些输入框是新增div弹出式的,使用$('input).keydown()无法绑定事件,建议使用on绑定

上代码


body.on('keydown','input',function (event) {
    if (event.keyCode === 13)focusNextInput(this);
});
function focusNextInput(thisInput) {
    let inputs=$('input');
    for(var i = 0;i < inputs.length;i++){
        if(i===(inputs.length-1)){
            inputs[0].focus();
            break;
        }else if(thisInput === inputs[i]){
            inputs[i+1].focus();
            break;
        }else{
            //不加最后一行eles就直接回到第一个输入框
            //看功能设计 若可以此处直接提交
        }
    }
}

本代码亲测可用

关注本站微信公众号