-1

I have an Input element that shows results only when I hit Enter from the keyboard. It's a third-party extension so don't have much control over it. What I want to do is that when I click a button, I want to trigger the ENTER event for the Input on the button click. Below is the code -

<input type="text" />
<button onclick = {**I want to bind enter keyboard event to the above input on this button click to show the search result**}>

Not sure if this is possible and if it is then will it be considered a bad coding standard? Please advice.

Thanks!

Mshah
  • 45
  • 8
  • Do you want to set focus on the input field? If that then attach a ref on the input and call focus method of the DOM on click of button. – tsfahmad Dec 30 '20 at 11:03
  • To raise an event create a custom event of KeyboadEvent with key as Enter and call input DOM's dispatch Event method to dispatch event for inout – tsfahmad Dec 30 '20 at 11:04
  • More specifically https://stackoverflow.com/a/38484217/3757232 – Jared Smith Dec 30 '20 at 11:04
  • @JaredSmith The answer given in this - https://stackoverflow.com/questions/38483865/javascript-how-to-create-a-keypress-event did not solve my issue. Thanks – Mshah Dec 30 '20 at 11:54
  • @Mshah that is just the canned comment that the system posts when a user votes to close a question as a duplicate of another. If you do not feel that your question is a duplicate of the other and I have done so in error, please edit the original question with your case as to why and I will consider retracting the close vote. – Jared Smith Dec 30 '20 at 12:36

1 Answers1

2

Jared Smith's comment above provides the following solution:

onButtonClick() {
   const input = document.querySelector('inputSelector'); // or you can possibly use a ref here
   const e = document.createEvent('HTMLEvents');
    e.initEvent("keypress", false, true);
    e.keyCode = 13; // I believe 13 is the enter key
  input .dispatchEvent(e);
}

[edit] apparently initEvent is now deprecated in favor of new Event. see here: https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

[edit2] I made a jsfiddle to show how new Event would work:

https://jsfiddle.net/pnwj97qs/

const $input = document.querySelector('input');
$input.addEventListener('keypress', function(e){
    if (e.key === 'Enter') {
      const value = e.target.value;
      document.querySelector('.result').textContent = value + ' was entered';
    }
  })
  
const $button = document.querySelector('button');
$button.addEventListener('click', function() {
    var e = new Event('keypress');
  e.key = 'Enter';
  e.keyCode = 13;
  $input.dispatchEvent(e);
})
<button>simulate enter key</button>
<input type="text">
<div class="result"></div>

As you can see, I tie the behavior to the "Enter" key, and it works even when you press the button because of the dispatch event.

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • Hi! The code gives the Event Object, but this doesn't seem to work. I added setTimeout as well but it's not working. Any inputs? Thanks – Mshah Dec 30 '20 at 11:53
  • You said you're using a library that waits for the `enter` event on the `input` element. I do'nt know anything about the library you're using and exactly how it's set up to listen for that event, so if this doesn't work, I do'nt know what will – TKoL Dec 30 '20 at 11:58
  • @TKoL you are correct about keyCode 13 being enter, but keyCode i[s also deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) because the WhatWG hates us. It's `evt.key === 'enter'` now, which is great too because edge decided to use their own key text names rather than the standard. Woohoo! – Jared Smith Dec 30 '20 at 12:32
  • @TKoL This solution works. Initially, it did not work due to the third-party library but I have resolved the conflict, and it's working now. Thanks! – Mshah Jan 01 '21 at 09:08