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

问：

我有一个简单的网络应用程序，用于输入一些文本字段，然后将这些字段输出到图像中。目前，变量设置为仅采用大写字母（没有标点符号或数字），但这些字段不会触发内置键盘的选项来自动前进到下一个变量输入字段，要求用户单独单击每个框。Next

Android/三星/Apple 键盘之间的输入类型中是否有特定的触发器，使手机将输入上的设置视为已连接，以使用户只需按回车/下一步？选项卡在 PC 上工作正常。

输入示例代码：

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

JavaScript 变量 keyboard-events

document.body.addEventListener('keydown', function(e) {
  if (e.which !== 13) {
    return;
  }

  const target = e.target;
  const form = target.closest('form');
  if (!form) {
    return;
  }

  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>

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

How do I trigger the "Next" option between 4 input fields?

评论

评论