HTML input 实现回车切换到下一个输入框功能

前言

遇到需求,在客户填写单子时,有多个输入框,为了省事,不需要频繁移动光标填写。

实现效果

实现方式一

HTML

javascript 复制代码
  <input type="text" name="serialNumber1" onkeydown="cursor(this);"/>
  <input type="text" name="serialNumber2" onkeydown="cursor(this);"/>
  <input type="text" name="serialNumber3" onkeydown="cursor(this);"/>
  <input type="text" name="serialNumber4" onkeydown="cursor(this);"/>

JS

javascript 复制代码
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;
       }
    }
}
function cursor(obj) {
    if (event.keyCode == 13) {
        focusNextInput(obj);
    }
}

实现方式二(推荐使用)

HTML

javascript 复制代码
  <input type="text" name="serialNumber1" />
  <input type="text" name="serialNumber2" />
  <input type="text" name="serialNumber3" />
  <input type="text" name="serialNumber4" />

JS

javascript 复制代码
$(document).ready(function () {
  $('input').on('keypress', function(event) {  
      // 在这里处理按键事件  
      if (event.keyCode == 13) { // 如果按下的是回车键  
         // 调用 focusNextInput 函数并传递当前的 input 元素  
         // 同上方法
         focusNextInput(this);  
      }  
   });  
});

问题及实现

  • 如果存在 input type="checkbox" 如何跳过?如果存在 input type="text" 输入框中存在值,想让光标自动移到数据最后面?
javascript 复制代码
  function focusNextInput(thisInput) {
     let inputAlls = document.getElementsByTagName("input");
     let inputs = []
     for (var i = 0; i < inputAlls.length; i++) {
         let input = inputAlls[i]; 
         if (input.type === "text" && !input.readOnly) {
            inputs.push(input)
         } 
     }
     // 如果是最后一个,则焦点回到第一个
     for (var i = 0; i < inputs.length; i++) { 
         if (i == (inputs.length - 1)) {
             inputs[0].focus(); break;
         } else if (thisInput == inputs[i]) {
            let textLength = inputs[i + 1].value.length
            if (textLength > 0) {
               // 光标自动移到数据最后面
               inputs[i + 1].selectionStart = textLength;  
               inputs[i + 1].selectionEnd = textLength;  
               // 聚焦到该输入框,确保光标可见  
               inputs[i + 1].focus(); break;
             } else {
               inputs[i + 1].focus(); break;
             }
         }
      }
    }
相关推荐
无奈何杨35 分钟前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼37 分钟前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆1 小时前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang1 小时前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆1 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing1 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼4 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel11 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着11 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友12 小时前
什么是API签名?
前端·后端·安全