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

sout-lanys

于 2024-03-29 19:05:28 发布

阅读量1.6k

点赞数 4

分类专栏： HTML/JS 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_44697754/article/details/137144383

版权

文章介绍了两种方法实现当用户在HTML表单中连续输入框中按回车时，自动将光标移动到下一个输入框或文本框末尾的功能，包括使用原生JavaScript和推荐的使用jQuery的事件处理方式，以及如何处理checkbox和已有值的文本框情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

实现效果

在这里插入图片描述

实现方式一

HTML

  <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

function focusNextInput(thisInput) {
   
     var inputs = document.getElementsByTagName("input");
     // 如果是最后一个，则焦点回到第一个
     for (var i = 0; i < inputs.length; i++)