如何使用 JavaScript 在文本框中按下 Enter 键后触发 HTML 按钮?
通常，开发人员会添加提交按钮来提交输入字段的文本。但是，如果他们允许用户通过按 Enter 键提交输入值，则可以改善应用程序的用户体验。
在这里，我们将学习使用按键监听器事件检测按键的一般方法。之后，只要用户按下 Enter 键，我们就可以执行任何操作。
语法
用户可以按照以下语法来检测用户按下 Enter 键的情况。
input.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
// 按下 Enter
}
});
在上述语法中，我们已将事件监听器添加到输入中。每当用户按下任何键时，都会触发 addEventListner() 方法的回调函数。之后，我们检查所按下键的 keycode。如果 keyCode 等于 13，则表示按下了 Enter 键。
示例 1
在下面的示例中，我们创建了输入字段。此外，我们还创建了提交按钮，该按钮调用 submitInput() 函数并清除输入字段。
此外，我们在 JavaScript 中通过 id 访问了输入，并在输入字段上添加了 addEventListner() 方法。我们在 addEventListner() 方法中添加了 keypress 事件。
event.keyCode 返回所按下键的代码，如果它等于 13，则表示用户按下了 Enter 键，我们需要提交输入值。
<html>
<body>
<h3> Using the <i> KeyPress </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// 提交输入按钮的函数
function submitInput() {
input.value = "";
output.innerHTML += "Input value submitted!";
}
// 检测按键事件的函数
input.addEventListener("keypress", function (event) {
// 检测事件键
if (event.keyCode == 13) {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
});
</script>
</html>
示例 2
在下面的示例中，我们使用 keydown 事件来检测用户是否按下了任何键。每当用户按下任何键时，都会触发 keydown 事件，之后，我们可以使用 keyCode 的值确保用户按下了 Enter 键。
每当用户按下 Enter 键时，我们都会调用 submitInput() 函数，而不是在 addEventListner() 方法的回调函数中处理提交输入值。
<html>
<body>
<h3> Using the <i> Keydown </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// 提交输入按钮的函数
function submitInput() {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
// 检测按键事件的函数
input.addEventListener("keydown", function (event) {
// 检测事件键
if (event.keyCode == 13) {
submitInput();
}
});
</script>
</body>
</html>
示例 3
在下面的示例中，我们使用了"keyup"事件，该事件在用户按下任何键后释放时触发。此外，我们还使用 addEventListner() 方法在按钮上添加了点击事件监听器。
<html>
<body>
<h3> Using the <i> Keyup </i> event to detect whenever user presses the enter</h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" id = "btn"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
input.value = "";
output.innerHTML = "Input value submited!";
})
input.addEventListener("keydown", function (event) {
if (event.keyCode == 13) {
input.value = "";
output.innerHTML = "<br>Input value submited!";
alert("Button code executed.");
}
});
</script>
</html>
开发人员学会了使用 Enter 键来提交输入值或表单。我们可以使用 keypress、keydown 或 keyup 任何事件来通过按 Enter 键触发表单提交。只要用户按下任意键，这三个事件都会触发，因此我们需要检查 keyCode 属性的值以确保用户按下了 Enter 键。
