JavaScript表单输入结束后,按下Enter焦点下移事件

html实例:

当表单输入结束,按下Enter时,触发focusNextInput事件

 1 <form name="f1" method="post" action="">
 2 <div class="form-group">
 3 <label for="">编号<i>*</i></label>
 4 <input class="form-control" type="text" name="code" id="code" value="" autocomplete="off" onkeypress="if(event.keyCode==13) focusNextInput(this);" />
 5 </div>
 6 <div class="form-group">
 7 <label for="">IQC单号<i>*</i></label>
 8 <input class="form-control" type="text" name="iqc_bno" id="iqc_bno" value="" autocomplete="off" onkeypress="if(event.keyCode==13) focusNextInput(this);"/>
 9 </div>
10 <div class="form-group">
11 <label for="">入库数量<i>*</i></label>
12 <input class="form-control" type="text" name="qty" id="qty" value="" autocomplete="off" onkeypress="if(event.keyCode==13) focusNextInput(this);"/>
13 </div>
14 <div class="form-group">
15 <label for="">操作员<i>*</i></label>
16 <input class="form-control" type="text" name="staff" id="staff" autocomplete="off" onkeypress="if(event.keyCode==13) focusNextInput(this);"/>
17 </div>
18 <div class="form-group">
19 <label for="">物料编号<i>*</i></label>
20 <input class="form-control" type="text" name="mcode" id="mcode" value="" autocomplete="off" onkeypress="if(event.keyCode==13) focusNextInput(this);"/>
21 </div>
22 
23 <div class="form-group" style="text-align:center">
24 <button class="btn btn-success" type="button" id="btn_submit" onclick="check_form()" style="100%;">提交</button>
25 </div>
26 </form>

Js代码:

 1 <script>
 2 
 3 function focusNextInput(thisInput) {
 4 var inputs = document.getElementsByTagName("input");
 5 for (var i = 0; i < inputs.length; i++) {
 6 // 如果是最后一个,则焦点回到第一个
 7 if (i == (inputs.length - 1)) {
 8 inputs[0].focus();
 9 break;
10 } else if (thisInput == inputs[i]) {
11 inputs[i + 1].focus();
12 break;
13 }
14 }
15 }
16 
17 window.onload = function () {
18 document.getElementsByName('code')[0].focus();
19 }
20 
21 </script>
原文地址:https://www.cnblogs.com/chencnblogs/p/15204891.html