Events-Keyboard Events

Posted on Edited on In Views: Disqus:

 

一、.keydown()

當鍵盤按鍵按下時將會觸發事件，跟.keypress()事件很像，

.keydown()與.keypress()的差別請參考.keypress()。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <form>
        <input id="target" type="text" value="Hello there">
    </form>
    <div id="other">
        Trigger the handler
    </div>

    <script>
        $("#target").keydown(function (event) {
            console.log("Handler for .keydown() called. And event.keyCode is " + event.keyCode);
        });

        $("#other").click(function () {
            $("#target").keydown();
        });
    </script>
</body>
</html>

 

二、.keypress()

跟.keydown()事件很像，當鍵盤按鍵按下時將會觸發事件，

但是.keypress()事件將不能偵測到「ESC」、「Shift」、「delete」等特殊鍵，

而.keypress()比.keydown()卻能辨別出大小寫，

例如：.keypress()能辨識出「a」的keyCode為97，「A」keyCode為65，

但.keydown()只能「a」與「A」的keyCode均視為65。

因此在辨識大小寫建議使用.keypress()方法，而偵測特殊鍵時應使用.keydown()方法。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
    <form>
        <input id="target" type="text" value="Hello there">
    </form>
    <div id="other">
        Trigger the handler
    </div>

    <script>
        $("#target").keypress(function (event) {
            console.log("Handler for .keypress() called. And event.keyCode is " + event.keyCode);
        });

        $("#other").click(function () {
            $("#target").keydown();
        });
    </script>
</body>
</html>

 

三、.keyup()

只有當按鍵彈起時將觸發事件，用法跟.keydown()、.keypress()差不多。