Perform "enter" on Element / Input

Question

I have got an Input field which I want to execute. Normally I would do it by document.getElementById("myinput").click(), but it is an Input so I have to execute it by simulating enter.

I want something like document.getElementById("myinput").performEnter();

I found this from How to trigger the enter keypress:

var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);

but is there a way to do this only in JavaScript?

Similar to: http://stackoverflow.com/questions/756786/javascript-capture-key — TheJim01, May 18 '17 at 14:43
Also: http://stackoverflow.com/questions/3276794/jquery-or-pure-js-simulate-enter-key-pressed-for-testing — freedomn-m, May 18 '17 at 14:48
And: http://stackoverflow.com/questions/17678161/how-to-trigger-enter-event-with-jquery (shall I stop now?) — freedomn-m, May 18 '17 at 14:48
Is your goal to submit the `form`? I assume this because that's the normal action of pressing the return key. If so, don't fake a click/keypress event and instead trigger the `submit()` event of the form — Rory McCrossan, May 18 '17 at 14:49

Scott Marcus · Answer 1 · 2017-05-18T14:56:58.073

1

You can create a custom event and use that with JQuery's .trigger() method.

var $txt = $("#txt");
var $btn = $("button");

$txt.on("keydown", function(evt){
  if(evt.keyCode === 13){
      // Create a custom event and pass to the button
      var e = $.Event("keydown");
      e.which = 13;   // ENTER
      e.keyCode = 13;
      $btn.trigger(e);  // Trigger the event for the button
  }
});

// Here is the code for a test button
$btn.on("keydown", function(evt){
  if(evt.keyCode === 13){
    console.log("You pressed ENTER in the text box and triggered the keydown event with ENTER!");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt">

<button>Test Button</button>

edited May 18 '17 at 14:56

answered May 18 '17 at 14:44

Scott Marcus

64,069
6
49
71

2

i don't want to detect if I clicked enter. I want to perform an enter in code – Erdnuss May 18 '17 at 14:47
@Erdnuss Updated answer to provide a custom event. – Scott Marcus May 18 '17 at 15:00

Perform "enter" on Element / Input

1 Answers1