JQuery keypress()用法及代碼示例

jQuerykeypress()每當瀏覽器注冊鍵盤輸入時，方法就會觸發按鍵事件。因此，使用keypress()方法可以檢測是否按下了任何鍵。

注意所有按鍵(例如非打印字符，例如 ALT、CTRL、SHIFT、ESC)不會觸發按鍵事件。可以使用keydown()方法來檢查這些鍵。

用法:

$(selector).keypress(function)

示例 1：下麵的代碼用於使用 jQuery 的 keypress() 方法檢查頁麵上的任意位置是否按下了某個鍵。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>Jquery | Keypress() </title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script>
        $(document).ready(()=>{
            $(document).
            keypress(function (event) {
            alert('You pressed a key');
        });
        });
    </script>
</head>
<body>
    <h1>
        Try pressing any printable
        character from the keyboard
    </h1>
</body>
</html>

輸出：

示例 2：下麵的代碼示例將使用keypress()方法顯示您在警報消息中按下的按鍵的名稱。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>Jquery | Keypress() </title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script>
        $(document).ready(()=>{
            $(document).
            keypress(function (event) {
            let key = (event.keyCode ? 
                       event.keyCode : 
                       event.which);
            let character = String.
            fromCharCode(key)
            alert('You pressed key : ' 
            + character);
        });
        });
    </script>
</head>
<body>
    <h1>
        Try pressing any printable
        character from the keyboard
    </h1>
</body>
</html>

輸出：

示例 3：如果您單擊輸入框中的 Enter 鍵，下麵的示例將顯示一條警報消息。

HTML


<!DOCTYPE html>
<html>
<head>
    <title>Jquery | Keypress() </title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script>
        $(document).ready(()=>{
            $('#textbox').
            keypress(function (event) {
                let keycode =
                    (event.keyCode ? 
                    event.keyCode : 
                    event.which);
                if (keycode == '13') {
                    alert('You pressed "enter" key in textbox');
                }
                event.stopPropagation();
            });
        });
    </script>
</head>
<body>
    <center>
        <br><br>
        <h1>
            Press " Enter key " 
            inside the textbox 
        </h1>
        <input id="textbox"
               type="text"
               size="50" />
    </center>
</body>
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自ihritik大神的英文原創作品 jQuery keypress() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。