Reliable Methods for Getting Character Values from KeyCode in JavaScript

Core Challenges in Keyboard Event Handling

In JavaScript development, handling keyboard events is a common requirement, but it contains many technical pitfalls. Developers often attempt to use String.fromCharCode(e.keyCode) to obtain characters corresponding to key presses. While this method appears straightforward, it suffers from significant reliability issues.

The Fundamental Difference Between keyCode and charCode

The keyCode property in JavaScript keyboard events represents physical key identifiers, not Unicode character encodings. This design leads to several critical problems:

First, identical numbers on the numeric keypad and main keyboard produce different keyCode values. For example, the number 1 on the main keyboard produces keyCode 49, while the number 1 on the numeric keypad (with NumLock enabled) produces keyCode 97. Using String.fromCharCode with these values yields unexpected results:

String.fromCharCode(49) // returns "1"
String.fromCharCode(97) // returns "a"

Second, letter keys have keyCode values that don't distinguish between uppercase and lowercase. The A key always produces keyCode 65, regardless of whether the Shift key is pressed. In actual character encoding, uppercase A has Unicode 65, while lowercase a has Unicode 97.

Reliable Solution: Using the keyup Event

For the original requirement of processing characters within the keydown event, a more reliable solution is to switch to the keyup event:

$("input").bind("keyup", function(e) {
    var value = this.value + String.fromCharCode(e.keyCode);
});

The key advantage of this approach is that when the keyup event triggers, the input field's value has already been updated, allowing direct access to the correct character content and avoiding the complexity of manual keyCode conversion.

Considerations for Handling Special Keys

For function keys (such as Esc, Delete, Backspace, arrow keys, etc.), these keys don't produce visible characters and therefore don't require character conversion. In practical applications, key type should be detected first:

$("input").bind("keyup", function(e) {
    // Check if it's a character key
    if (e.keyCode >= 48 && e.keyCode <= 90) {
        var value = this.value; // Directly use the updated input value
        // Further processing logic
    } else {
        // Handle function key logic
        handleSpecialKey(e.keyCode);
    }
});

Modern Browser Development Trends

It's important to note that modern web standards are gradually deprecating the keyCode feature. As mentioned in the reference article, some JavaScript libraries (like jsPsych) have removed support for numeric key codes starting from version 6.3.0, as browser vendors consider this feature obsolete.

The new standard recommends using the key property, which directly returns the string representation of the key:

document.addEventListener('keyup', function(e) {
    console.log(e.key); // Directly returns key string representation, like 'a', '1', 'Enter'
});

jQuery Event Normalization

When using jQuery, the e.which property provides cross-browser key code normalization. It uniformly handles differences between keyCode and charCode, but still faces the same fundamental issues in character conversion.

Practical Application Recommendations

Based on the above analysis, the following recommendations are suggested for practical projects:

1. Prefer using the keyup event over keydown for character input handling
2. For scenarios requiring real-time response, consider combining multiple event types
3. Gradually migrate to modern standards using the key property
4. For scenarios where keydown must be used, establish comprehensive key mapping tables

By adopting these best practices, developers can build more reliable and maintainable keyboard event handling logic, avoiding common pitfalls and compatibility issues.