JavaScript 触发ENTER键上的按钮
在本文中,我们将看到如何在按下ENTER键时触发按钮。为了在按下 ENTER 键时触发点击按钮,我们可以使用jQuery的 keyup() , keydown() 和 keypress() 事件中的任何一个。
keyup(): 当释放一个键盘键时发生此事件。该方法要么触发keyup事件,要么在发生keyup事件时运行函数。
语法:
它为所选元素触发keyup事件。
$(selector).keyup()
它将一个函数附加到keyup事件上。
$(selector).keyup(function)
keydown(): 按下键盘按键时发生此事件。 该方法会触发keydown事件,或在发生keydown事件时运行函数。
语法:
它触发选定元素的keydown事件。
$(selector).keydown()
将一个功能附加到keydown事件。
$(selector).keydown(function)
keypress(): 这个事件类似于keydown事件。当释放键盘上的一个键时,会触发这个事件。该方法在触发keypress事件时,要么触发keypress事件,要么运行一个函数。
Note: 这个事件并不适用于所有的键(例如ALT、CTRL、SHIFT、ESC等)。
语法:
它为选定的元素触发keypress事件。
$(selector).keypress()
它将一个函数附加到键盘按键事件。
$(selector).keypress(function)
示例 1: 此示例使用 keypress() 事件将回车键作为按钮触发
<!DOCTYPE html>
<html>
<head>
<title>
Rename object key in JavaScript
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
Username:<input id="uname" type="text"><br>
Password:<input id="pass" type="password"><br>
<button id="GFG_Button">Submit</button>
<p id="gfg"></p>
<script>
("#pass").keypress(function (event) {
if (event.keyCode === 13) {
("#GFG_Button").click();
}
});
$("#GFG_Button").click(function () {
document.getElementById("gfg").innerHTML = `Button clicked after
ENTER button is pressed`
});
</script>
</body>
</html>
输出:

示例 2: 本示例使用 keyup() 事件将回车键作为按钮触发。
<!DOCTYPE html>
<html>
<head>
<title>
Rename object key in JavaScript
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
Username:<input id="uname" type="text">
<br>
Password:<input id="pass" type="password">
<br>
<button id="GFG_Button">Submit</button>
<p id="gfg"></p>
<script>
("#pass").keyup(function (event) {
if (event.keyCode === 13) {
("#GFG_Button").click();
}
});
$("#GFG_Button").click(function () {
document.getElementById("gfg").innerHTML = "Button clicked"
});
</script>
</body>
</html>
输出:

极客教程