按下/键聚焦输入框时，如何移除自动添加的/字符？

问题出在keypress事件的执行顺序上——浏览器会先触发你的监听函数，之后才执行输入字符到输入框的默认行为，所以你提前修改value的操作会被后续的默认行为覆盖。

正确的处理方式是直接阻止浏览器的默认输入行为，从根源上避免/被写入输入框，同时完成聚焦操作：

document.addEventListener("keydown", function(event) {
  const inputElement = document.getElementById("formInput");
  if (event.key === '/') {
    // 阻止浏览器默认的输入行为
    event.preventDefault();
    // 聚焦目标输入框
    inputElement.focus();
  }
})

• 改用keydown事件：相比keypress，keydown能更早捕获按键操作，且对所有按键的兼容性更好（keypress已被标记为废弃）
• 调用event.preventDefault()：直接取消浏览器处理该按键的默认行为，无需后续再删除字符

如果一定要保留keypress事件（不推荐），可以通过setTimeout把删除操作放到事件循环的下一轮，等浏览器完成输入后再执行：

document.addEventListener("keypress", function(event) {
  const inputElement = document.getElementById("formInput");
  if (event.key === '/') {
    inputElement.focus();
    // 延迟执行，等浏览器完成输入后移除末尾的/
    setTimeout(() => {
      inputElement.value = inputElement.value.slice(0, -1);
    }, 0);
  }
})

显然第一种方案更高效合理，完全避免了不必要的字符输入和删除操作。

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