如何通过onclick函数触发Shift与=组合按键操作？

当然可以实现。要模拟Shift和=键的组合按下，你需要利用KeyboardEvent构造函数，同时设置修饰键参数和目标按键，并按顺序触发对应的键盘事件。

以下是完整的实现代码：

<input value="点击触发Shift+=" type="button" id="triggerBtn">
<input type="text" id="testInput" placeholder="在这里测试按键效果">

const triggerBtn = document.getElementById('triggerBtn');
const testInput = document.getElementById('testInput');

// 监听目标输入框的键盘事件，验证触发效果
testInput.addEventListener('keydown', (e) => {
  if (e.shiftKey && e.key === '=') {
    console.log('Shift和=键被触发了');
  }
});

// 点击按钮时触发组合按键
triggerBtn.addEventListener('click', () => {
  // 先触发Shift键的keydown事件
  const shiftDownEvent = new KeyboardEvent('keydown', {
    shiftKey: true,
    bubbles: true,
    cancelable: true
  });
  testInput.dispatchEvent(shiftDownEvent);

  // 再触发=键的keydown事件，保持Shift按下状态
  const equalDownEvent = new KeyboardEvent('keydown', {
    key: '=',
    shiftKey: true,
    bubbles: true,
    cancelable: true
  });
  testInput.dispatchEvent(equalDownEvent);

  // 可选：模拟按键抬起的完整周期
  setTimeout(() => {
    const equalUpEvent = new KeyboardEvent('keyup', {
      key: '=',
      shiftKey: false,
      bubbles: true,
      cancelable: true
    });
    const shiftUpEvent = new KeyboardEvent('keyup', {
      shiftKey: false,
      bubbles: true,
      cancelable: true
    });
    testInput.dispatchEvent(equalUpEvent);
    testInput.dispatchEvent(shiftUpEvent);
  }, 100);
});

关键说明 #

• 优先使用keydown事件：keypress已被逐步废弃，且对修饰键的支持不如keydown稳定。
• 标记修饰键状态：在构造KeyboardEvent时，通过shiftKey: true参数标记Shift键处于按下状态。
• 遵循真实按键顺序：先触发Shift的keydown，再触发=的keydown，模拟实际操作逻辑；若需要完整的按键周期，可补充keyup事件。
• 选择可聚焦目标：确保事件派发到输入框、文本域这类可聚焦元素，否则部分浏览器可能不会响应模拟的键盘事件。

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