按回车跳转到下一个框 HTML,在输入框中按回车键的光标自动跳到下一个输入框【原创】...

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="width:100%;">提交</button>25 </div>26 </form>

在项目中，为了方便客户使用，提高客户体验性，在PC端要求在输入框中按键盘的回车键能够执行相应的操作，以下代码可实现：在一个输入框按回车键后光标跳到下一个输入框，如果当前光标所在位置为最后夜歌输入框，则回到第一个输入框。

1.在input标签中调用方法focusNextInput

2.在js中定义方法focusNextInput

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;

}

window.onload = function () {18 document.getElementsByName('code')[0].focus();

​}