我需要使用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='';
}
}
答案 0 :(得分:2)
您必须将事件附加到文档上
document.addEventListener("keypress", function(e){
if (e.key === "Enter"){
//do your stuff
}
}, false);
请注意使用e.key
,请勿使用e.keyCode
,因为它是deprecated
答案 1 :(得分:0)
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>
答案 2 :(得分:0)
这里是您所需要的正在运行的工作代码段,请尽情享受
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>