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

【问题标题】：How can I use Enter Key instead of clicking the button by switch如何使用 Enter 键而不是通过开关单击按钮
【发布时间】：2023-03-12 00:17:01
【问题描述】：

我需要使用 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='';
  }

}

【问题讨论】：

How to capture Enter key press?的可能重复

标签： javascript html

【解决方案1】：

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，因为它代表键盘上的物理键，而不是生成的字符。运行这段代码sn-p。

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>

【讨论】：

【解决方案2】：

这里是运行的工作代码sn-p，如你所愿，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>

【讨论】：

【解决方案3】：

您必须将事件附加到文档中：

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

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

【讨论】：