JavaScript 触发ENTER键上的按钮

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>

输出:

JavaScript 触发ENTER键上的按钮

示例 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>

输出:
JavaScript 触发ENTER键上的按钮

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程