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>