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

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因为它已被弃用

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>