知道哪个文本框已完成答案

【问题标题】：Know which textbox was completed知道哪个文本框已完成
【发布时间】：2014-12-18 18:24:32
【问题描述】：

我有一个下拉列表。当一个项目被选中时，页面中会出现五个文本框（都在同一个表单中）。可以在这些文本框中输入一位或两位数字。在下拉列表中选择一个项目后，焦点转到 TextBox1。每次用户按 Enter 键时，都会提交表单。

我想要的是在用户按 Enter 后将焦点移动到正确的位置：如果用户在 TextBox1 中，则 Enter 后焦点将移动到 Textbox2。如果用户在 TextBox 3 中输入数据，焦点将移至 TextBox 4。或者，如果用户在 TextBox5（最后一个）中，焦点将移至初始下拉列表。

我的问题是：

1) 我不能在每个文本框中使用 JS onkeydown，因为用户可以在文本框中输入一位或两位数字。

2) 我尝试使用 JS onsubmit，但该指令适用于整个表单。我怎么知道哪个文本框完成了？

【问题讨论】：

你是如何提交表格的？
你试过设置每个文本框的tabindex属性吗？
@Diodeus：使用回车键。该表单有一个提交按钮，但具有属性可见性：隐藏，因此用户不知道它。
看答案here。 Enter 键很可能被您的浏览器解释为表单提交操作。解决方案是不使用提交按钮或设置表单操作，而是通过 JavaScript 提交表单。
@alfadog67：不。我可以试一试。但是每次用户按 Enter 键时，都会提交表单。 Handler.php 获取数据并返回表单。我不知道如何在 phps 之间“记住”一个 tabindex。

【解决方案1】：

您可以只使用 HTML5 验证。

例如，如果您使用添加required 到一个字段，当用户按回车键进入implicitly submit 表单时，该字段为空，浏览器将聚焦无效字段并显示错误消息而不是提交。

input[type=submit] {
    display: none;
}

<form>
    <input required />
    <input required />
    <input type="submit" />
</form>

【讨论】：