Difference Between keydown and keypress Events

This page preserves the original comparison between keydown and keypress, but updates the displayed value to event.key rather than the old normalized event.which key number.

jQuery Source Top ↑

$( function () {
    $( document ).on( "keydown", function (event) {
        $( "#d1" ).text(
            "keydown | key: " + event.key + " | code: " + event.code
        );
    });

    $( document ).on( "keypress", function (event) {
        $( "#d2" ).text(
            "keypress | key: " + event.key
        );
    });
});

HTML Top ↑

<div id="d1" class="alert alert-primary">
    keydown details appear here
</div>

<div id="d2" class="alert alert-secondary">
    keypress details appear here
</div>

What to Use in New Code Top ↑

Use keydown when you need to respond to specific keyboard controls. For text changes inside an input or textarea, use the browser input event instead of relying on keypress.

keydown tutorial · keypress legacy reference · modern key identification

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: