如何不使用jQuery实现向input标签模拟触发keypress按键事件

实现代码 #

直接扩展input元素原型，即可实现你需要的调用方式：

HTMLInputElement.prototype.simulatekeypress = function(char) {
  const charCode = char.charCodeAt(0);
  const eventOptions = {
    key: char,
    code: char.length === 1 ? `Key${char.toUpperCase()}` : char,
    which: charCode,
    keyCode: charCode,
    bubbles: true,
    cancelable: true
  };

  // 触发keydown事件，符合真实输入的事件顺序
  const keydownEvt = new KeyboardEvent('keydown', eventOptions);
  this.dispatchEvent(keydownEvt);
  if (keydownEvt.defaultPrevented) return;

  // 触发核心keypress事件
  const keypressEvt = new KeyboardEvent('keypress', eventOptions);
  this.dispatchEvent(keypressEvt);
  if (keypressEvt.defaultPrevented) return;

  // 模拟实际输入效果，将字符写入输入框并调整光标位置
  const [start, end] = [this.selectionStart, this.selectionEnd];
  this.value = this.value.slice(0, start) + char + this.value.slice(end);
  this.selectionStart = this.selectionEnd = start + char.length;

  // 触发后续的keyup、input事件，匹配真实输入的完整事件流
  this.dispatchEvent(new KeyboardEvent('keyup', eventOptions));
  this.dispatchEvent(new Event('input', { bubbles: true }));
};

调用示例 #

完全匹配你需要的调用形式：

// 先获取目标input元素
const inputElement = document.querySelector('#your-input-id');
// 直接调用方法模拟输入字符a
inputElement.simulatekeypress('a');

补充说明 #

• 如果你只需要触发keypress事件、不需要实际把字符写入输入框，删除代码中「模拟实际输入效果」相关的片段即可
• 如需支持退格、回车等特殊按键，可在方法内增加判断分支处理对应逻辑即可
• 代码无任何第三方依赖，兼容所有主流现代浏览器

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