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;
             }
         }
      }
    }
相关推荐
花花鱼几秒前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09334 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135825 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning25 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人35 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00136 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css