zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    京东商城Java岗4面面经分享,(3轮技术+HR面已拿offer)
    选中input框禁止键盘弹出
    熟练使用artTemplate.helper()方法
    HTTP标头“Vary:Accept-Encoding”指定方法及其重要性分析
    浏览器缓存系列之三:设置浏览器缓存
    浏览器缓存系列之二:实战
    浏览器缓存系列之一
    使用递归算法实现树菜单
    为什么要用Docker
    高中生也能读懂的Docker入门教程
  • 原文地址:https://www.cnblogs.com/chencnblogs/p/15204891.html
Copyright © 2011-2022 走看看