jQuery keyup event lagging on user input

Question

I have a textbox where a user can only enter numeric data. I'm using the following function on keyup of the textbox:

$('#ssn').keyup(function () {
    var val = this.value.replace(/\D/g, '');
    this.value = val;
});

The problem I'm running into is the lag when the user keys up on a restricted key, the character displays for a moment before it's replaced with the empty string. And holding down a key will display a stream of characters in the box until the key is released. Is there a way to prevent this behavior? I've tried different keyboard events like keydown or keypress and they didn't seem to behave any better. Here is a fiddle of the problem: https://jsfiddle.net/oxpy96g9/

The 'lag' is unavoidable as the keyup event doesn't fire until the key is released and the value is added to the input field. — Rory McCrossan
1. A slowdown is introduced through jQuery 2. A slowdown is introduced through repeated variable declaration 3. A slowdown is introduced through firing up the JavaScript Regex machine 4. Your code runs AFTER the user releases the key, which looks like a slowdown. All in all, you've written a mess. — Andrue Anderson
Try listening to the input event instead... $('#ssn').on('input', function () { ... }); — Josh Crozier
If you don't care about any of the previous points, try hooking keyup and keydown both, that might cause the visualization you're looking for. — Andrue Anderson

Josh Crozier Josh Crozier · Accepted Answer · 2015-12-21T16:14:10

_{Converting my comment to an answer}

Rather than listening to the keyup event, listen to the input event so that the event is fired when the value changes rather than when the key is released:

Updated Example

$('#numbers').on('input', function() {
  this.value = this.value.replace(/\D/g, '');
});

jQuery keyup event lagging on user input

1 Answers