文档 keydown 触发按钮不起作用 | Javascript

Question

我需要帮助来获取 Enter 键以触发按钮单击。我已经编写了一些 javascript 代码，这样当用户在文本框中按下回车键时，就会点击不同的按钮，但我现在想要“你应该通过！”当用户在文档中的任意位置（不是文本框）按下回车键时触发按钮，以便使用输入的文本创建一个 div。现在，如果您单击“您将通过！”按钮，它会起作用，但我希望即使用户按下 Enter 也能触发此按钮。 我试过使用：

document.onkeydown = function(event){
if(event.keyCode === 13) {
    if(document.getElementById('buid')) {
       bu.click();
    }
}
}

但是当用户按下回车键以触发“验证输入”按钮时，div 只是出现并且没有“你应该通过！”出现，因此它只是触发该按钮而不出现。上面的代码不在下面的代码sn-p中。如何使用 Vanilla JS 解决这个问题？ 附言'bu' 是'You shall Pass!' 的变量。 button 和 'buid' 是该按钮的 id。

var inputg = document.getElementById("inputtext");
var b = document.getElementById('button');
inputg.onkeydown = function(event){
if(event.keyCode == 13){
	b.click();
}
};

inputg.addEventListener("input", noButton);

function noButton(){
if(inputg.value === ""){
 b.style.display = 'none';
}else{
 b.style.display = 'inline-block';
}
}

noButton();


b.addEventListener('click', function(){
addDiv();
});


function addDiv(){
b.parentNode.removeChild(b);
var inputv = document.getElementById("inputtext").value;
var n = document.createElement("input");
n.type = "number";
n.placeholder = "Enter your Age";
var nv = n.value;
document.getElementById("bodydiv").appendChild(n);
n.onkeydown = function(event){
if(event.keyCode == 13){
	but.click();
}
};
var but = document.createElement("button");
but.innerHTML = "Validate Inputs";
document.getElementById("bodydiv").appendChild(but);
inputg.onkeydown = function(event){
if(event.keyCode == 13){
	but.click();
}
};
var bu = document.createElement("button");
bu.id = "buid";
bu.innerHTML= "You shall Pass!";
document.getElementById("bodydiv").appendChild(bu);
bu.style.display = 'none';
but.addEventListener('click', function(){
if(n.value<=0 || inputg.value === ""){
alert("Invalid Age or Name, You shall not pass!");
}else{
inputg.disabled = true;
n.disabled = true;
but.style.display = 'none';
bu.style.display = 'inline';
}
});
bu.addEventListener('click', function(){
inputg.disabled = false;
n.disabled = false;
bu.style.display = 'none';
but.style.display = 'inline-block';
var inputvs = document.getElementById("inputtext").value;
var ns = n.value;
var d = document.createElement('div');
d.innerHTML = "My name is " + inputg.value + "<br />" + "And I am " + n.value + " years old";
d.style.display = 'block';
document.getElementById("bodydiv").appendChild(d);
n.value = "";
inputg.value = "";
});

if((bu.style.display = 'none')){
inputg.disabled = false;
n.disabled = false;
}
}

body {
  font-family: Century Gothic;
  height: 100%;
  width: 100%;
}

 <input type="text" id="inputtext" placeholder="Enter LOTR name">
  <button id="button">GO!
  </button>
  <div id="bodydiv">
  </div>

Answer 1

您可以尝试不同的方法来收听整个div 或页面。

$(window).keydown(function(event){
    if(event.keyCode == 13){
        b.click();
    }
});

还有

$('body').on('keydown', function() {
     if(event.keyCode == 13){
        b.click();
    }
});

还有

$(document.body).on('keydown', function (e) {
    if(event.keyCode == 13){
        b.click();
    }
}):