<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>play some html</title> <style type="text/css"> ul li{ list-style: none; } </style> </head> <body> <form id="form1"> <input type="text" tabindex="1" onkeydown="enterToTab(event,this);"/> <input type="text" tabindex="3" onkeydown="enterToTab(event,this);"/> <input type="text" tabindex="2" onkeydown="enterToTab(event,this);"/> <input type="text" tabindex="4" onkeydown="enterToTab(event,this);"/> <input type="button" value="click me" onclick="alert('hello world')" tabindex="5" onkeydown="enterToTab(event,this);"/> </form> <script src="js/vendor/modernizr-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"></script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script type="text/javascript"> function enterToTab(event, input) { var e = event?event:window.event; var form = document.getElementById('form1'); if(e.keyCode == 13) { var tabindex = input.getAttribute('tabindex'); tabindex++; var inputs = form.getElementsByTagName('input'); for(var i=0,j=inputs.length; i<j; i++) { if (inputs[i].getAttribute('tabindex') == tabindex) { inputs[i].focus(); break; } } } } </script> </body> </html>
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时），所以可以通过改变当前input的tabindex属性的大小，改变当触发快捷键的时候，文本框切换的顺序。
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！