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

jquery输入框设置回车事件实现按回车键跳到下一个元素上

标签: javascript jquery
作者:洋洋电脑帮 | 发布时间:2025-03-30 18:24:56 | 阅读:1 | 评论:0

本文介绍如何给input输入框、文本框等元素绑定回车事件,实现按键盘上的回车(Enter)快捷键后光标或者焦点自动跳转到下一个元素上的实现方法。

方法一

$(document).ready(function () {
$("#txt_JumpPager").keydown(function (e) {
var curKey = e.which;
if (curKey == 13) {
$("#lbtn_JumpPager").click();
return false;
}
});
});

其中的txt_JumpPager为文本框ID,lbtn_JumpPager为事件按钮ID。

 

方法二

loginInputForm.find('input').on('keyup',function(){
if(event.keyCode=='13'){
执行跳到下一个文本框的代码
}
})

方法三

<!DOCTYPE html>  
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gbk">   
<script type="text/javascript">   
    //jQuery实现在一个输入框按回车键后光标跳到下一个输入框  
    function focusNextInput(thisInput)  
    {   
        var inputs = document.getElementsByTagName("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;   
            }   
        }   
    }   
</script>   
</head>  
<body>   
<table>   
姓名:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">   
年龄:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">   
工号:<input type="text" onkeypress="if(event.keyCode==13) focusNextInput(this);">   
</table>  
</body>  
</html>

这3中方法实现按回车键光标自动跳转使用的函数不太一样,大家可以根据自己的情况选择使用。

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




登录页面验证码图片