jquery - jQuery - 检测“替换”函数何时执行操作

Question

我使用 jQuery 替换功能来确保用户只能在电话号码字段中输入数字和连字符（它是一个私有 Web 应用程序，并且必须启用 JS 才能登录）。

我想在触发替换功能后 x 秒内向输入添加一个 css 类（突出显示红色），以便用户直观地看到输入正在拒绝输入。

如何在替换功能激活后将 css 类添加到输入 x 秒？（仅当实际替换输入时）

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

Answer 1

使用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);
    }
});​

演示。

Answer 2

replace()是原生 JavaScript，而不是 jQuery。您可以先测试表达式并查看是否需要替换，然后触发该类：

var reg = /[^\d-]/g;

$("#v_phone").bind('keyup blur',function() { 
    var $this = $(this);
    if( reg.test(this.value) ) {
        $this.addClass('highlight');
        setTimeout(function() {
            $this.removeClass('highlight');
        },1000); // 1s
        $this.val( this.value.replace(reg,'') );
    }
});

http://jsfiddle.net/HvGnf/