为何keypress事件未触发？求模拟Tab按键实现输入范围切换方案

看起来你是想在文本输入容器里划分多个指定的输入区域，实现「输入填满当前范围自动跳转到下一个区域」「输入内容超出范围长度直接跳转」的效果对吧？我之前处理过类似的需求，给你整理一个可行的实现思路和代码：

核心思路 #

我们需要监听输入事件，实时追踪光标位置，判断当前是否处于指定的输入范围内；当满足「输入填满当前范围」或「光标移出当前范围末尾」的条件时，自动将光标移动到下一个输入范围的起始位置。

完整代码示例 #

假设你是在textarea中实现该功能，以下是可直接测试的代码：

<textarea id="targetInput" rows="5" cols="60">请在指定区域输入：[****************][****************]</textarea>
<script>
// 定义输入范围的起始和结束索引（对应textarea中[*]区域的位置）
const starts = [22, 47];
const ends = [30, 55]; // 假设每个输入范围长度为8，可根据实际需求调整

const inputEl = document.getElementById('targetInput');

// 找到当前光标所在的输入范围索引
function getCurrentRangeIndex(cursorPos) {
  for (let i = 0; i < starts.length; i++) {
    if (cursorPos >= starts[i] && cursorPos <= ends[i]) {
      return i;
    }
  }
  return -1; // 不在任何输入范围内
}

// 移动光标到指定位置
function moveCursorTo(pos) {
  inputEl.focus();
  inputEl.setSelectionRange(pos, pos);
}

// 监听输入事件
inputEl.addEventListener('input', function(e) {
  const cursorPos = inputEl.selectionStart;
  const currentIndex = getCurrentRangeIndex(cursorPos);

  if (currentIndex === -1) return; // 不在输入范围内，不做处理

  const currentStart = starts[currentIndex];
  const currentEnd = ends[currentIndex];
  const rangeLength = currentEnd - currentStart + 1;

  // 获取当前范围内已输入的有效内容长度（过滤原始占位符*）
  const currentContent = inputEl.value.slice(currentStart, currentEnd + 1);
  const filledLength = currentContent.replace(/\*/g, '').length;

  // 条件1：当前范围已填满，跳转到下一个范围
  if (filledLength >= rangeLength) {
    const nextIndex = currentIndex + 1;
    if (nextIndex < starts.length) {
      moveCursorTo(starts[nextIndex]);
    }
    return;
  }

  // 条件2：光标移出当前范围末尾，自动跳转
  if (cursorPos > currentEnd) {
    const nextIndex = currentIndex + 1;
    if (nextIndex < starts.length) {
      moveCursorTo(starts[nextIndex]);
    }
  }
});

// 初始化：默认定位到第一个输入范围的起始位置
moveCursorTo(starts[0]);
</script>

关键逻辑说明 #

• getCurrentRangeIndex：判断当前光标处于哪个输入范围内，是后续处理的基础。
• moveCursorTo：封装了光标定位逻辑，确保输入框先聚焦再调整光标位置，避免无效操作。
• 输入事件处理：
  1. 先校验光标是否在指定范围内，不在则跳过处理。
  2. 计算当前范围的有效输入长度，填满后直接跳转到下一个范围。
  3. 若光标不小心移出当前范围末尾，也自动触发跳转。

适配调整建议 #

• 如果你的输入容器是单行input而非textarea，逻辑基本一致，仅需注意单行输入的范围索引计算更简单。
• 如果是多个独立的input框组成输入范围，逻辑会更简化：监听每个input的输入事件，当输入长度达到最大值时，直接调用下一个input的focus()方法即可。

你之前参考的示例无效，大概率是没正确处理光标位置的实时计算，或是没考虑到输入内容覆盖原始占位符（比如你的[*]）的情况，上面的代码已经覆盖了这些细节，可以测试看看~

内容的提问来源于stack exchange，提问作者user8732245