Question

I use the jQuery replace function to ensure that users can only enter digits and hyphens into the phone number field (its a private web app, and JS has to be enabled to login).

I want to add a css class (highlight red) to the input for x seconds after the replace function is fired so the user sees visually that the input is rejecting there input.

How do I add a css class to the input for x seconds after the replace function is activated? (only when a input is actually replaced)

$("#v_phone").bind('keyup blur',function(){ 
    $(this).val( $(this).val().replace(/[^\d-]/g,'') ); }
);

Answer 1

Use setTimeout():

$("#v_phone").bind('keyup blur',function(){ 
    var $this = $(this);
    var currentValue = $this.val();
    var newValue = currentValue.replace(/[^\d-]/g,'');
    if (currentValue != newValue) {
       $this.val(newValue);
       $this.addClass("alert");  // add class
       var x = 5;
       setTimeout(function () {
         $this.removeClass("alert");  // remove class after x seconds
       }, x * 1000);
    }
});​

DEMO.