jQuery event.which and Modern Key Detection

This URL is retained because event.which was widely used in older jQuery keyboard tutorials. For current code, use event.key for the key value and event.code when the physical key location matters.

Older event.which Pattern Top ↑

$( document ).on( "keydown", function (event) {
    // Legacy code often used:
    $( "#t1" ).text( "Key number: " + event.which );
});

Open the legacy event.which demo →

Modern Key Identification Top ↑

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

event.key vs event.code Top ↑

• event.key: the meaning/value of the key, such as "a", "A", "Enter" or "Escape".
• event.code: the physical keyboard position, such as "KeyA" or "ArrowLeft".

For shortcut logic, choose the property that matches the intent of the interface rather than converting everything to a numeric code.

Example: Detect Enter Top ↑

$( "#name" ).on( "keydown", function (event) {
    if ( event.key === "Enter" ) {
        event.preventDefault();
        $( "#result" ).text( "Enter pressed" );
    }
});

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: