如何在执行特定操作后自动触发输入按键事件？ [英] How can I automatically trigger an enter key press event after a certain action is executed?

问题描述

我在我的网络应用程序中编写了一些单元测试，并且想要在点击下载到文本文件按钮后自动从我的页面触发 Enter 按键事件。如何在jQuery或Javascript中执行此操作？

解决方案

1. 创建一个变量，我们如果用户点击了你的按钮。

     var clicked = false; 
     




2. 为您的按钮添加一个事件侦听器，以便当用户点击它时， 点击变量将变为 true 。

     myButton.addEventListener（'click'，function（）{
    clicked = true; 
   }）; 
     




3. 添加按键事件侦听器：
   
   

     document.addEventListener（'keypress'，function（e）{
    //`e`是事件
   }）; 
     




4. 在那个事件侦听器里面，检查用户以前是否点击了
   
   

     if（clicked）{
    // ... 
   } 
     




5. 如果他做了，请检查按下的键。 Enter的关键代码是13。

     var keynum = e.keyCode || e.which; 
    if（keynum == 13）{
    // ... 
   } 
     





  clicked = false; $ b 
 
如果输入的是按下的键， 
  

否则，一旦用户点击您的按钮并按下回车键，则无需点击按钮。


6. 之后，运行您的代码。例如，这会在2秒后调用函数 f 。

     setTimeout （f，2000）; 
     

现场演示

  var clicked = false; document.querySelector（'＃btn'）。addEventListener（'click'，function（）{clicked = true; snippet.log（You clicked （keyed），function（e）{if（clicked）{var keynum = e.keyCode || e.which; if（keynum）;}};}}; document.addEventListener（'keypress'，function == 13）{clicked = false; snippet.log（`clicked` now now'false`。Waiting 2 seconds ...）; setTimeout（f，2000）;}}}）; function f（）{snippet .log（Function`f` executed executed！）;}  

#btn {border：3px纯红色; cursor：pointer;}

< div id =btn >点击我，然后按Enter键。< / div><！ - 提供`snippet`对象，请参阅http://meta.stackexchange.com/a/242144/134069 - >< script src =http://tjcrowder.github.io/simple-snippets-console/snippet.js>< / script>

I'm writing some unit test in my web apps and I want to automatically trigger an Enter key pressed event from my page after for example a download to text file button was clicked. How can i do this in jQuery or Javascript?

解决方案

1. Create a variable that tells us if the user has clicked your button.

   var clicked = false;
   

2. Add an event listener to your button, so that when the user clicks on it, the clicked variable will become true.

   myButton.addEventListener('click', function(){
     clicked = true;
   });
   

3. Add a keypress event listener:

   document.addEventListener('keypress', function(e) {
     // `e` is the event
   });
   

4. Inside that event listener, check if the user clicked previously

   if(clicked) {
     // ...
   }
   

5. If (s)he did, check the pressed key. Enter's key code is 13.

   var keynum = e.keyCode||e.which;
   if(keynum == 13) {
      // ...
   }
   

6. If the pressed key was enter, use

   clicked = false;
   

   Otherwise, once the user clicked your button and pressed enter, it wouldn't be necessary to click the button again.

7. After that run your code. For example, this will call function f after 2 seconds.

   setTimeout(f, 2000);
   

Live demo

var clicked = false;
document.querySelector('#btn').addEventListener('click', function(){
  clicked = true;
  snippet.log("You clicked the button. `clicked` is now `true`");
});
document.addEventListener('keypress', function(e) {
  if(clicked) {
    var keynum = e.keyCode || e.which;
    if(keynum == 13) {
      clicked = false; 
      snippet.log("`clicked` is now `false`. Waiting 2 seconds...");
      setTimeout(f, 2000);
    }
  }
});
function f() {
  snippet.log("Function `f` executed successfully!");
}

#btn {
  border: 3px solid red;
  cursor: pointer;
}

<div id="btn">Click me, and then press enter.</div>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

这篇关于如何在执行特定操作后自动触发输入按键事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！