如何实现HTML输入框长按按键时不输入连续重复字符

要解决长按按键导致连续输入重复字符的问题，你可以通过跟踪按键状态或过滤输入内容两种方式实现，以下是具体方案：

方案一：拦截按键重复触发事件（推荐） #

通过监听keydown事件，判断同一按键的触发间隔，拦截系统默认的长按重复行为，避免重复字符生成。

<input type="text" id="noRepeatInput">

<script>
const input = document.getElementById('noRepeatInput');
let lastPressedKey = '';
let lastKeyTimestamp = 0;
// 系统默认按键重复间隔约50ms，可根据需求调整
const repeatThreshold = 50;
// 排除无需拦截的功能键/非字符键
const excludedKeys = ['Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Enter', 'Tab'];

input.addEventListener('keydown', (e) => {
  const now = Date.now();
  // 仅拦截字符键的重复触发
  if (!excludedKeys.includes(e.key) && e.key === lastPressedKey && now - lastKeyTimestamp < repeatThreshold) {
    e.preventDefault();
  } else {
    lastPressedKey = e.key;
    lastKeyTimestamp = now;
  }
});

// 按键松开时重置状态，确保下次输入正常触发
input.addEventListener('keyup', () => {
  lastPressedKey = '';
  lastKeyTimestamp = 0;
});
</script>

说明：

• 该方法直接阻止系统生成重复字符，不会出现输入后回退的视觉闪烁，体验更流畅。
• 通过excludedKeys排除功能键，避免影响输入框的正常操作（如删除、换行、光标移动）。

方案二：过滤输入内容中的重复字符 #

如果需要兼容更多输入场景（如粘贴、输入法联想），可以监听input事件，实时过滤掉末尾的重复字符。

<input type="text" id="noRepeatInput">

<script>
const input = document.getElementById('noRepeatInput');
let lastInputChar = '';

input.addEventListener('input', (e) => {
  const currentValue = e.target.value;
  const latestChar = currentValue.slice(-1);
  
  // 若最后输入的字符与上次重复，截断回之前的内容
  if (latestChar === lastInputChar) {
    e.target.value = currentValue.slice(0, -1);
  } else {
    lastInputChar = latestChar;
  }
});

// 处理删除操作，更新记录的最后字符
input.addEventListener('keydown', (e) => {
  if (e.key === 'Backspace' || e.key === 'Delete') {
    lastInputChar = e.target.value.slice(-1);
  }
});
</script>

说明：

• 该方法能处理所有输入方式产生的重复字符，但会有短暂的字符显示后被删除的视觉效果，对体验有轻微影响。
• 需要额外处理删除操作，确保删除后输入相同字符不会被误拦截。

内容的提问来源于stack exchange，提问作者Axel Carré