How can I use Enter Key instead of clicking the button by switch

Question

I need to use Enter key to trigger my button. it should call function greetings().

HTML

<input id='input' />
    <button onclick='greetings()' id='btn' class="button button5">OK</button>

Javascript

function greetings(){
  let name=document.getElementById('input').value;
  if(document.getElementById('input').value.length!==0){
    console.log(document.getElementById('input').value.length);
    document.getElementById("hed").innerHTML="Hello "+name;

  }
  else{

    document.getElementById("hed").innerHTML='';
  }

}

Possible duplicate of [How to capture Enter key press?](https://stackoverflow.com/questions/13987300/how-to-capture-enter-key-press) — esqew, Jul 10 '19 at 13:25

score 2 · Answer 1 · answered Jul 10 '19 at 13:29

You have to attach the event to the document:

document.addEventListener("keypress", function(e){
            if (e.key === "Enter"){
              //do your stuff
            }
        }, false);

Please note the use of e.key, do not use e.keyCode cause it's deprecated

mahan · Answer 2 · 2019-07-10T13:53:51.087

KeyboardEvent.code

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value which isn't altered by keyboard layout or the state of the modifier keys. developer.mozilla.org

You need to listen to keydown or keyup events and then check if the event.code is Enter.

function greetings() {
  let name = document.getElementById('input');
  let text = document.getElementById("hed");
  if (name !== 0) {
   text.innerHTML = "Hello " + name.value;
  } else {
    text.innerHTML = '';
  }
}

const body = document.querySelector("body");
body.onkeyup = function(event) {
  console.log("event", event.code)
  if (event.code === "Enter") {
    greetings()   
  }
};

<input id="input">
<p id="hed"></p>

Update

It is better to use event.code instead of event.key since it represents a physical key on the keyboard, not the generated character. Run this code snippet.

window.addEventListener("keydown", function(event) {
  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
            event.code + "'";
  let el = document.createElement("span");
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
}, true);

#output {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid black;
}

<p><strong>Credit:</strong>Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code </p>

<hr>

<p>Press keys on the keyboard to see what the KeyboardEvent's key and code
   values are for each one.</p>
<div id="output">
</div>

score 0 · Answer 3 · answered Jul 10 '19 at 13:47

Here is the running working code snippet, as you required, ENJOY

function greetings(){
  var name=document.getElementById('input').value;
  if(document.getElementById('input').value.length!==0){
    console.log(document.getElementById('input').value.length);
    document.getElementById("hed").innerHTML="Hello "+name;

  }
  else{

    document.getElementById("hed").innerHTML='';
  }

}

document.addEventListener("keypress", function(e){
            if (e.key === "Enter" || e.which == 13){
              greetings();
            }
        }, false);

<input id='input' />
    <button onclick='greetings()' id='btn' class="button button5">OK</button>
    <p id="hed"></p>

How can I use Enter Key instead of clicking the button by switch

3 Answers3

KeyboardEvent.code

Update