如何触发 4 个输入字段之间的“下一步”选项？

Question

我有一个简单的网络应用程序，用于输入一些文本字段，然后将这些字段输出到图像中。目前，变量设置为仅采用大写字母（无标点符号或数字），但字段不会触发内置键盘的“下一步”选项自动前进到下一个变量输入字段，需要用户单击每个框单独。 android/三星/苹果键盘之间的输入类型是否有特定的触发器，使手机将输入设置视为已连接，以便用户只需按 Enter/下一步？ Tab 在 PC 上运行良好。谢谢！

输入的示例代码-（对移动设备上的所有编辑感到抱歉，此网站对于从移动设备粘贴代码来说是垃圾）。

最后：< input pattern ="[A-Z]*" style="text-transform: uppercase;" type="text" name="d" onkeyup="this.value=this.value.replace(/[^A-z]/g,'');" id="d">
`

另外，对于那些在没有回复的情况下对帖子投了反对票的人——你应该等待很长的时间才能获得你余生所需的任何服务。

Answer 1

正如我从你的问题中得到的那样，当他们在手机上按 Enter 键时，你希望输入“聚焦”到下一个输入吗？

document.body.addEventListener('keydown', function(e) {
  if (e.which !== 13) {
    return; // Return early if the pressed key is not Enter (key code 13).
  }

  const target = e.target;
  const form = target.closest('form');
  if (!form) {
    return; // Return early if no form element is found.
  }

  const focusable = Array.from(form.querySelectorAll('input, select')).filter(function(element) {
    return window.getComputedStyle(element).display !== 'none';
  });
  const currentIndex = focusable.indexOf(target);
  const next = focusable[currentIndex + 1];
  if (next) {
    next.focus();
  }

  e.preventDefault();
});

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" />
  <br>
  <label for="email">Email:</label>
  <input type="text" id="email" />
  <br>
  <label for "age">Age:</label>
  <input type="text" id="age" />
  <br>
  <label for="country">Country:</label>
  <select id="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>