Question

我需要一个输入文本字段来输入17个字符，该输入字段包含17个单元格，每个单元格包含一个字符，单元格的标签为其索引。当用户在一个单元格中键入一个字符时，下一个单元格将自动聚焦，并且可以使用快捷键（如Shift + Tab）或箭头键转到上一个单元格。

the following picture describes my field but with 5 cells

Answer 1

您可以在每个文本字段中添加一个更改事件侦听器，并通过将+1添加到选择器中来使用jquery / js专注于下一个侦听器（考虑字段名称也将基于其索引形成）。就像这样：

<style>
  input {
    width: 10px;
  }
</style>

<input maxlength="1" name="0" class="cell">
<input maxlength="1" name="1" class="cell">
<input maxlength="1" name="2" class="cell">

<script>
  let cells = document.getElementsByClassName('cell');
  for (i = 0; i < cells.length; i++)
  {
   cells[i].tabIndex = '-1'; cells[i].addEventListener('keydown', function(e)
    {
      let name = this.name;
      let nextInput = document.getElementsByName(parseInt(name)+1);
      console.log(name);
      if (nextInput[0]) {
          nextInput[0].focus();
      }
    });
  }
  cells[0].focus()
</script>

带有索引标签的html输入文本

1 个答案: