为何触发keypress事件时text类型input输入框会出现重复字符？

嘿，这个问题我之前调试代码时也踩过坑，咱们一步步来理清楚原因和解决办法～

问题根源：事件时机 + 浏览器默认行为 #

你用的keypress事件，触发时机是浏览器即将把按键对应的字符插入到输入框之前。这时候你手动通过setAttribute('value', char)给输入框设置了一次字符，紧接着浏览器的默认输入行为又会把同一个字符再插入一遍——相当于同一个字符被添加了两次，所以首次按键就出现了重复。

另外还要提一句：操作input的value时，直接用input.value比setAttribute('value', ...)更靠谱。因为setAttribute修改的是HTML标签上的属性，而输入框实际显示、用户交互的是DOM对象的value属性，两者在用户输入后会不同步。

解决办法 #

方法1：阻止浏览器默认行为 #

在keypress事件里调用e.preventDefault()，取消浏览器自动插入字符的动作，完全由我们自己控制输入内容：

const input = document.getElementById('click');
let char = '';
input.addEventListener('keypress', function(e) {
  e.preventDefault(); // 阻止默认输入行为
  const x = e.which || e.keyCode;
  char += String.fromCharCode(x);
  input.value = char; // 直接设置DOM的value属性
});

方法2：换用keyup事件 #

如果不需要手动维护char变量，只是想获取或处理输入内容，可以改用keyup事件——它在按键抬起后触发，这时候浏览器已经完成了默认输入动作，不会出现重复：

const input = document.getElementById('click');
input.addEventListener('keyup', function(e) {
  // 此时input.value已经是用户输入后的完整内容
  console.log('当前输入内容：', input.value);
});

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