Question

我需要使用Enter键来触发我的按钮。它应该调用函数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='';
  }

}

Answer 1

您必须将事件附加到文档上

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

请注意使用e.key，请勿使用e.keyCode，因为它是deprecated

Answer 2

KeyboardEvent.code

KeyboardEvent.code属性表示键盘上的物理键键盘（与按键生成的字符相反）。换句话说，此属性返回的值不会被更改键盘布局或修改键的状态。 developer.mozilla.org

您需要收听keydown或keyup事件，然后检查event.code是否为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>

更新

最好使用event.code代替event.key，因为它代表键盘上的物理键，而不是生成的字符。运行此代码段。

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>

Answer 3

这里是您所需要的正在运行的工作代码段，请尽情享受

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>

如何使用Enter键而不是通过开关单击按钮

3 个答案:

KeyboardEvent.code

更新