极客教程JavaScript 如何在文本框中点击回车按钮后触发HTML按钮
一般来说，开发人员会添加提交按钮来提交输入字段的文本。然而，如果他们允许用户通过按回车键来提交输入值，就会改善应用程序的用户体验。
在这里，我们将学习使用按键监听器事件来检测按键的一般方法。之后，只要用户按了回车键，我们就可以执行任何操作。
语法
用户可以按照下面的语法来检测用户何时按下回车键。
input.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
// enter pressed
}
});
在上面的语法中，我们已经为输入法添加了事件监听器。每当用户按下任何一个键，都会触发addEventListner()方法的回调函数。之后，我们检查所按下的键的键码。如果keyCode等于13，则表示按下了enter键。
例子1
在下面的例子中，我们已经创建了输入字段。同时，我们还创建了提交按钮，它调用了submitInput()函数并清除了输入框。
同时，我们在JavaScript中通过id访问了输入，并在输入栏上添加了addEventListner()方法。我们在addEventListner()方法中添加了按键事件。
event.keyCode返回按下的键的代码，如果它等于13，就意味着用户按下了回车键，我们就需要提交输入值。
<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 for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "Input value submitted!";
}
// function to detect keypress event
input.addEventListener("keypress", function (event) {
// detect event key
if (event.keyCode == 13) {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
});
</script>
</html>
例子2
在下面的例子中，我们使用了keydown事件来检测用户是否按下了任何键。每当用户按下任何一个键，都会触发keydown事件，之后，我们可以通过keyCode的值来确保用户已经按下了enter键。
每当用户按下回车键，我们就调用submitInput()函数，而不是在addEventListner()方法的回调函数中处理submit输入值。
<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 for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
// function to detect keypress event
input.addEventListener("keydown", function (event) {
// detect event key
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>
开发人员学会了使用回车键来提交输入值或表单。我们可以使用keypress、keydown或keyup任何事件来触发按回车键的表单提交。只要用户按下任何一个键，这三个事件都会触发，所以我们需要检查keyCode属性的值以确保用户按下回车键。