在JS / jQuery中触发keypress / keydown / keyup事件？

8 回答

• 214

  您可以通过直接调用它们来触发任何事件，如下所示：

  $(function() {
      $('item').keydown();
      $('item').keypress();
      $('item').keyup();
      $('item').blur();
  });
  

  这样做你想做什么？

  您可能还应该触发 .focus() 并可能 .change()

  如果要使用特定键触发键事件，可以这样执行：

  $(function() {
      var e = $.Event('keypress');
      e.which = 65; // Character 'A'
      $('item').trigger(e);
  });
  

  这里有一些关于按键事件的有趣讨论：jQuery Event Keypress: Which key was pressed?，特别是关于与.which属性的跨浏览器兼容性 .

  回复于 2024-04-26T07:34:38+08:00
• 9

  要触发enter键，我必须修改@ebynum响应，具体来说，使用keyCode属性 .

  e = $.Event('keyup');
  e.keyCode= 13; // enter
  $('input').trigger(e);
  

  回复于 2024-04-26T07:34:38+08:00
• 2

  你可以调度像这样的事件

  el.dispatchEvent(new Event('focus'));
  el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
  

  回复于 2024-04-26T07:34:38+08:00
• 1

  这是一个触发任何事件的vanilla js示例：

  function triggerEvent(el, type){
  if ('createEvent' in document) {
          // modern browsers, IE9+
          var e = document.createEvent('HTMLEvents');
          e.initEvent(type, false, true);
          el.dispatchEvent(e);
      } else {
          // IE 8
          var e = document.createEventObject();
          e.eventType = type;
          el.fireEvent('on'+e.eventType, e);
      }
  }
  

  回复于 2024-04-26T07:34:38+08:00
• 18

  你现在能够做到：

  var e = $.Event("keydown", {keyCode: 64});
  

  回复于 2024-04-26T07:34:38+08:00
• 24

  您可以使用： EventTarget.dispatchEvent(event) 并通过传入新的KeyboardEvent作为事件来实现此目的 .

  例如： element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

  工作范例：

  // get the element in question
  const input = document.getElementsByTagName("input")[0];
  
  // focus on the input element
  input.focus();
  
  // add event listeners to the input element
  input.addEventListener('keypress', (event) => {
    console.log("You have pressed key: ", event.key);
  });
  
  input.addEventListener('keydown', (event) => {
    console.log(`key: ${event.key} has been pressed down`);
  });
  
  input.addEventListener('keyup', (event) => {
    console.log(`key: ${event.key} has been released`);
  });
  
  // dispatch keyboard events
  input.dispatchEvent(new KeyboardEvent('keypress',  {'key':'h'}));
  input.dispatchEvent(new KeyboardEvent('keydown',  {'key':'e'}));
  input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));
  

  <input type="text" placeholder="foo" />
  

  MDN dispatchEvent

  MDN KeyboardEvent

  回复于 2024-04-26T07:34:38+08:00
• 27

  首先，我需要说 Sionnach733 的样本完美无缺 . 一些用户抱怨没有实际的例子 . 这是我的两分钱 . 我在使用这个网站时一直在进行鼠标点击模拟：https://www.youtube.com/tv . 您可以打开任何视频并尝试运行此代码 . 它会切换到下一个视频 .

  function triggerEvent(el, type, keyCode) {
      if ('createEvent' in document) {
              // modern browsers, IE9+
              var e = document.createEvent('HTMLEvents');
              e.keyCode = keyCode;
              e.initEvent(type, false, true);
              el.dispatchEvent(e);
      } else {
          // IE 8
          var e = document.createEventObject();
          e.keyCode = keyCode;
          e.eventType = type;
          el.fireEvent('on'+e.eventType, e);
      }
  }
  
  var nextButton = document.getElementsByClassName('icon-player-next')[0];
  triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press
  

  回复于 2024-04-26T07:34:38+08:00
• 0

  我想我会引起你的注意，在一个jQuery插件中定义一个监听器的特定环境中，那个成功模拟我的keypress事件，最终被该监听器捕获的东西，就是使用setTimeout（） . 例如

  setTimeout(function() { $("#txtName").keypress() } , 1000);
  

  $("#txtName").keypress() 的任何使用都是 ignored ，尽管放在 .ready() function 的末尾 . 无论如何，没有异步创建特定的DOM补充 .

  回复于 2024-04-26T07:34:38+08:00