How to fire enter button event dynamically using pure javascript

Question

I have an input it has a function running if the keycode ==13

I also have a button on the same page if the user clicks that button it should trigger click event associated with it and at the same time it should also fire the enter click using javascript

the code is shown as below

<input type="text" class="myInputValue">
<button class="myLink">submit</button>

(function(){
  var inputc = document.getElementsByClassName('myInputValue')[0];
  var submitbtn = document.getElementsByClassName('myLink')[0]
  inputc.addEventListener("keydown", function(e){
    if(e.keyCode == 13){
      alert("Entered")
    }
  });
  submitbtn.addEventListener("click", function(e){
    // here I need functionality which will fire enter key event too

  });
})();

http://jsfiddle.net/pnq6xfwa/

`e.keyCode` is read-only, for good reasons. Why don't you just dispatch a `submit` event? — connexo, Jan 24 '19 at 06:58
Possible duplicate of [Is it possible to simulate key press events programmatically?](https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically) — Smankusors, Jan 24 '19 at 07:00
Try reading this: [Creating and triggering events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) — Oram, Jan 24 '19 at 07:01
@connexo on the enter event is a global functionality so I don't want to disturb it. In only one case I want to trigger on submit so is there a way I can achieve the requirement — Hemanth Paluri, Jan 24 '19 at 07:03

score 1 · Answer 1 · answered Jan 24 '19 at 07:07

If you don't need to get the specific event data from the enter button being pressed and instead just need to same function to run you can give your anonymous function a name such as processKey and use that whenever you want the enter key code to run. Then when you click on your button, you can pass through 13 as the key argument to processKey method.

See working example below:

function processKey(key) {
  if(key == 13){
    alert("Entered");
  }
}

(function(){
  var inputc = document.getElementsByClassName('myInputValue')[0];
  var submitbtn = document.getElementsByClassName('myLink')[0];
  
  inputc.addEventListener("keydown", e => processKey(e.keyCode));
  submitbtn.addEventListener("click", _ => processKey(13));
})();

<input type="text" class="myInputValue">
<button class="myLink">submit</button>

the constrain hear is I cannot change the existing code. the only option I have is playing around with submit click event. is there a way which you can help — Hemanth Paluri, Jan 24 '19 at 07:55

score 0 · Answer 2 · answered Jan 24 '19 at 07:08

0

Create a custom event and dispatch it.

submitbtn.addEventListener("click", function(e){
    var event = new CustomEvent("keydown", {
        keyCode: 13
    });
    inputc.dispatchEvent(event);
});

answered Jan 24 '19 at 07:08

Shubham Chaudhary

499
2
7

Hi @shubham i have tried this but it is not working please find it in the link http://jsfiddle.net/pnq6xfwa/1/ – Hemanth Paluri Jan 24 '19 at 07:42

Monica Acha · Answer 3 · 2019-01-24T09:11:24.220

Instead you can call the btn event on enter.

(function(){
  var inputc = document.getElementsByClassName('myInputValue')[0];
  var submitbtn = document.getElementsByClassName('myLink')[0]
  inputc.addEventListener("keydown", function(e){
    if(e.keyCode == 13){
       submitbtn.click();
    }
  });
  submitbtn.addEventListener("click", function(e){
 alert('Hello');

  });
})();

<input type="text" class="myInputValue">
<button class="myLink">submit</button>

Or you can call function for both the events

(function() {
  var inputc = document.getElementsByClassName('myInputValue')[0];
  var submitbtn = document.getElementsByClassName('myLink')[0]
  inputc.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      test();
    }
  });
  submitbtn.addEventListener("click", function(e) {
    test();

  });
})();

function test(){
  alert('hello')
}

<input type="text" class="myInputValue">
<button class="myLink">submit</button>

the constrain hear is I cannot change the existing code. the only option I have is playing around with submit click event. is there a way which you can help — Hemanth Paluri, Jan 24 '19 at 07:44
No, as I said I cannot make any changes to the function of input enter function — Hemanth Paluri, Jan 24 '19 at 11:34

How to fire enter button event dynamically using pure javascript

3 Answers3