html页面实现回车跳转下一文本框
window.onload = function () { //阻止按回车按钮后提交表单的问题 document.getElementsByTagName("form")[0].onkeydown = function () { if (event.keyCode == 13) { return false; } }; var inputs = document.getElementsByTagName("input"); var index = 1; for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text" && inputs[i].style.display != "none" && inputs[i].getAttribute("disabled") != "disabled") { //给页面上的没有隐藏的文本框设置tabindex顺序值,下文按tabindex顺序跳转 inputs[i].setAttribute("tabindex", index); //监听onkeydown事件,输入回车时实现跳至下一文本框 inputs[i].onkeydown = goNextInput; index++; } } }; function goNextInput() { if (window.event.keyCode == 13) { //录入回车时才往下一录入框跳 //下一个录入框的tabindex值 var nextIndex = parseInt(window.event.srcElement.getAttribute("tabindex")) + 1; var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text" && inputs[i].style.display != "none") { var tabIndex = inputs[i].getAttribute("tabindex"); if (tabIndex != null) { var index = parseInt(tabIndex); if (typeof index == "number" && !isNaN(index) && index == nextIndex) { inputs[i].focus(); } } } } } }
本文来自博客园,作者:chyun2011,转载请注明原文链接:https://www.cnblogs.com/cy2011/p/6672954.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)