如何使用JavaScript通过类名触发keypress事件

下面分两种常用技术方案给出实现方式，你可以根据项目技术栈选择：

原生JavaScript方案 #

通过类选择器获取所有目标input，遍历绑定点击事件，判断左键后手动触发keypress：

// 替换成你实际的类名
const targetInputs = document.querySelectorAll('input.your-target-class');

targetInputs.forEach(input => {
  input.addEventListener('click', function(e) {
    // 仅响应鼠标左键点击（button值为0是左键标准判定）
    if (e.button === 0) {
      // 构造keypress事件，这里以触发Enter键为例，可按需修改key值
      const keypressEvent = new KeyboardEvent('keypress', {
        key: 'Enter',
        code: 'Enter',
        bubbles: true, // 保持事件冒泡特性，和原生行为一致
        cancelable: true
      });
      // 触发事件
      this.dispatchEvent(keypressEvent);
    }
  });

  // 可选：绑定监听验证事件是否触发
  input.addEventListener('keypress', function(e) {
    console.log(`keypress已触发，按键：${e.key}`);
  });
});

jQuery方案 #

如果项目使用jQuery，写法更简洁：

// 替换成你实际的类名
$('input.your-target-class').click(function(e) {
  // 判断是否为鼠标左键
  if (e.button === 0) {
    // 触发keypress事件，模拟Enter键
    $(this).trigger('keypress', { key: 'Enter' });
  }
});

// 可选：验证事件触发
$('input.your-target-class').keypress(function(e, eventData) {
  const pressKey = eventData ? eventData.key : e.key;
  console.log(`keypress已触发，按键：${pressKey}`);
});

注意事项 #

• 鼠标按键判定：e.button === 0对应左键，右键为2，中间滚轮键为1
• 若需触发特定按键，需在事件对象中指定key/code属性，确保事件行为符合预期
• 部分场景下可通过e.preventDefault()阻止浏览器默认行为，避免冲突

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