如何在JavaScript中模拟按下$这类特殊按键？

问题根源 #

• keypress事件已被标准废弃，Chrome对其支持有限，仅靠单个事件无法模拟「Shift+Digit4」这类组合键的输入逻辑
• 直接设置key: "$"不会被浏览器的输入处理逻辑识别，因为实际输入$需要完整的「按住Shift→按4→松开4→松开Shift」按键流程

正确实现方案 #

要模拟输入$，需按顺序触发完整的按键事件链，或直接用更可靠的input事件插入字符：

方案一：直接触发input事件（最稳定，推荐）

绕过复杂的按键模拟，直接向目标元素插入字符，适合仅需输入内容的场景：

const myElement = document.getElementById('your-input-id'); // 替换为你的目标元素

const inputEvent = new InputEvent('input', {
  data: '$',
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(inputEvent);

方案二：模拟完整组合键流程（适合需要完整按键事件日志的场景）

严格按顺序触发Shift和Digit4的按下、输入、抬起事件：

const myElement = document.getElementById('your-input-id');

// 1. 按下Shift键
const shiftDown = new KeyboardEvent('keydown', {
  key: 'Shift',
  code: 'ShiftLeft',
  shiftKey: true,
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(shiftDown);

// 2. 按下Digit4键
const digit4Down = new KeyboardEvent('keydown', {
  key: '4',
  code: 'Digit4',
  shiftKey: true,
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(digit4Down);

// 3. 触发字符输入（Chrome下需设置charCode）
const keyPress = new KeyboardEvent('keypress', {
  charCode: 36, // $的ASCII码
  key: '$',
  shiftKey: true,
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(keyPress);

// 4. 抬起Digit4键
const digit4Up = new KeyboardEvent('keyup', {
  key: '4',
  code: 'Digit4',
  shiftKey: true,
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(digit4Up);

// 5. 抬起Shift键
const shiftUp = new KeyboardEvent('keyup', {
  key: 'Shift',
  code: 'ShiftLeft',
  shiftKey: false,
  bubbles: true,
  cancelable: true
});
myElement.dispatchEvent(shiftUp);

注意事项 #

• 所有事件必须设置bubbles: true和cancelable: true，否则Chrome会忽略该事件
• Mac环境下Shift键的code用ShiftLeft或ShiftRight均可，但按下和抬起事件需保持一致

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