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;
             }
         }
      }
    }
相关推荐
一枚前端小能手2 分钟前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖2 分钟前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号8 分钟前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js
学习3人组8 分钟前
React JSX 语法讲解
前端·react.js·前端框架
小高00713 分钟前
🚨 2025 最该淘汰的 10 个前端 API!
前端·javascript·面试
一枚前端小能手15 分钟前
🎨 页面卡得像PPT?浏览器渲染原理告诉你性能瓶颈在哪
前端·javascript
lssjzmn22 分钟前
性能飙升!Spring异步流式响应终极指南:ResponseBodyEmitter实战与架构思考
java·前端·架构
毕设源码-郭学长28 分钟前
【开题答辩全过程】以 基于vue在线考试系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
詩句☾⋆᭄南笙33 分钟前
初识Vue
前端·javascript·vue.js
Javian1 小时前
浅谈前端工程化理解
前端