如何使用JavaScript模拟键盘Enter键实现PDF页码输入跳转功能

原有代码失效原因 #

你编写的代码存在两个核心问题：

• 触发的keydown事件未携带Enter键的标识参数，事件监听逻辑无法判定按下的是Enter键，不会执行跳转逻辑
• 使用的document.createEvent、initEvent属于已废弃的旧DOM API，参数配置能力不足，兼容性存在隐患

修正后的实现代码 #

// 1. 先给输入框赋值目标页码，替换为你需要的页码数值
const pageInput = document.getElementById('input');
pageInput.value = '3'; // 示例跳转到第3页

// 2. 触发change事件，确保输入框值更新被组件感知
const changeEvent = new Event('change', {
  bubbles: true,
  cancelable: true
});
pageInput.dispatchEvent(changeEvent);

// 3. 构造标准Enter键keydown事件，携带完整按键参数
const enterEvent = new KeyboardEvent('keydown', {
  bubbles: true,
  cancelable: true,
  key: 'Enter',
  code: 'Enter',
  keyCode: 13,
  which: 13
});
// 派发事件
pageInput.dispatchEvent(enterEvent);

// 可选：如果上述代码仍不生效，补充派发keyup事件，部分场景监听逻辑绑定在keyup上
// const enterUpEvent = new KeyboardEvent('keyup', {
//   bubbles: true,
//   cancelable: true,
//   key: 'Enter',
//   code: 'Enter',
//   keyCode: 13,
//   which: 13
// });
// pageInput.dispatchEvent(enterUpEvent);

注意事项 #

如果输入框是第三方PDF组件封装的内部元素，需要确保获取DOM节点的选择器准确，避免选中错误的输入框导致事件派发无效。

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