jQuery Keyboard Events

Keyboard events allow you to capture every keystroke a user makes on their keyboard. This is essential for creating live-search features, performing real-time form validation, or building custom keyboard shortcuts for your web application.

---

The Three Core Methods

There are three main events triggered during the process of pressing a key. They always happen in a specific order:

---

Detecting Specific Keys

To detect which specific key was pressed (like Enter, Escape, or an Arrow key), you use the **event** object that is passed into the handler function.

$("input").keydown(function(event) {
    // Each key has a unique numeric code called "which"
    console.log("Key code: " + event.which);
    
    // You can also use "event.key" for the actual name
    console.log("Key pressed: " + event.key);
});

---

Example: Detecting the "Enter" Key

A common requirement is to trigger an action when a user finishes typing and presses Enter (code 13).

$("#search").keyup(function(event) {
    if (event.which == 13) {
        alert("Searching for: " + $(this).val());
    }
});

---

Practical Use Case: Character Counter

You can use keyup() to update a character count in real-time as a user types into a text area.

<textarea id="message" maxlength="100"></textarea>
<p>Characters left: <span id="count">100</span></p>

<script>
$("#message").keyup(function() {
    var length = $(this).val().length;
    var left = 100 - length;
    $("#count").text(left);
});
</script>

---

Key Bindings Reference

Method	Best For...
keydown()	Keyboard shortcuts (e.g., Ctrl+S) or games where reaction speed matters.
keyup()	Validating input or updating UI after a change is finalized.
keypress()	Legacy support for detecting punctuation and letter cases (deprecated).

---

Key Points to Remember

• keydown fires first and repeats; keyup fires last once.
• Use the event object to access metadata about the keystroke.
• event.which (numeric) and event.key (string) are the two ways to identify keys.
• Keyboard events only fire on elements that have **focus** (like inputs or the document itself).
• Always prefer keyup for tasks that involve reading the final value of an input.