JavaScript keypress Event: Legacy Reference and Modern Alternatives

Older JavaScript commonly attached an onkeypress handler to a text field. The event mainly represented character-producing keys and did not provide a consistent modern model for every keyboard key.

// Legacy pattern
input.onkeypress = function () {
  // old keypress handler
};

// Modern key action
input.addEventListener('keydown', (event) => {
  console.log(event.key);
});

How the Old keypress Event Worked Top ↑

The original plus2net example copied a text field’s current value during keypress. Because the event could occur before the browser inserted the new character, the copied value could appear one character behind.

Legacy keypress timing demo → Legacy event-listener version →

Why the Copied Text Can Lag Top ↑

Keyboard events describe key activity; text-editing events describe changes to a control’s value. If your requirement is “run after the field value changes,” use input rather than choosing a keyboard event merely for timing.

const input = document.getElementById('t1');
const output = document.getElementById('t2');

input.addEventListener('input', () => {
  output.value = input.value;
});

Which Event Should Replace keypress? Top ↑

Migrating Old onkeypress Code Top ↑

Remove the inline onkeypress attribute, select the element in JavaScript, attach the appropriate modern event with addEventListener(), and replace keyCode/which checks with event.key where the goal is key identification.

See getElementById() for element selection. Continue with keydown or return to Event Handling.

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: