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, Dec 21 '15 at 16:06
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, Dec 21 '15 at 16:07
Try listening to the `input` event instead... `$('#ssn').on('input', function () { ... });` — Josh Crozier, Dec 21 '15 at 16:07
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, Dec 21 '15 at 16:11
http://stackoverflow.com/questions/17384218/jquery-input-event — brandelizer, Dec 21 '15 at 16:14

score 10 · Accepted Answer · answered Dec 21 '15 at 16: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, '');
});

answered Dec 21 '15 at 16:14

Josh Crozier

233,099
56
391
304

Oh wait. I tried this in jsfiddle, but apparently it was lagging, so it didn't process my click on "run" button after I've edited it to check :D – nicael Dec 21 '15 at 16:26

jQuery keyup event lagging on user input

1 Answers1