数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 在文本框中按下回车键后触发 HTML 按钮？
通常，开发人员会添加提交按钮来提交输入字段的文本。但是，如果他们允许用户通过按下 Enter 键提交输入值，则可以改善应用程序的用户体验。
在这里，我们将学习使用键盘监听器事件检测按键的通用方法。之后，每当用户按下 Enter 键时，我们都可以执行任何操作。
语法
用户可以按照以下语法来检测用户何时按下 Enter 键。
input.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
// enter pressed
}
});
在以上语法中，我们已将事件监听器添加到输入框。每当用户按下任何键时，它都会触发 addEventListner() 方法的回调函数。之后，我们检查所按按键的键码。如果 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 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 键。
每当用户按下 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 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>
开发人员学习了如何使用 Enter 键提交输入值或表单。我们可以使用 keypress、keydown 或 keyup 任何事件通过按下 Enter 键来触发表单提交。所有三个事件都会在用户按下任何键时触发，因此我们需要检查 keyCode 属性的值以确保用户按下了 Enter 键。
5K+ 浏览量
