How can I automatically trigger an enter key press event after a certain action is executed?

后端 未结 4 1919
耶瑟儿~
耶瑟儿~ 2021-01-02 10:04

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 b

相关标签:
4条回答
  • 2021-01-02 10:44
    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>

    0 讨论(0)
  • 2021-01-02 11:00

    If I get your question right, this is what you are looking for

    <html>
    <head>
    
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    
      <script type="text/javascript">
          $(document).keydown(function(event){
                if(event.keyCode == 13){                
                    alert("keypressed");
                }
            });
    
    function clickevent()
    {                
         var e = $.Event("keydown");
         e.which = 13;
         e.keyCode = 13;
         $(document).trigger(e);     
    }
    </script>
    
    </head>
    <body id="thebody">
      <input type="button" onclick="clickevent()" value="click me first">
    </body>
    </html>
    
    0 讨论(0)
  • 2021-01-02 11:00

    If you're talking about automatically entering an Enter key to trigger a submit event, you can use this instead:

    $("#formID").submit();
    


    To trigger this event after a button has been pressed, try this:

    $("#buttonID").click(function() {
        $("#formID").submit(); // submits form
    });
    
    0 讨论(0)
  • 2021-01-02 11:00
    $("#txtfield").keyup(function(e) {
     if(e.keyCode == 13) {
      $("#submit").submit();
     }
    });
    
    0 讨论(0)
提交回复
热议问题