0

jQuery 置換機能を使用して、ユーザーが電話番号フィールドに数字とハイフンのみを入力できるようにします (プライベート Web アプリであり、ログインするには JS を有効にする必要があります)。

ユーザーが入力が入力を拒否していることを視覚的に確認できるように、置換関数が起動された後、x 秒間入力に css クラス (赤でハイライト) を追加したいと考えています。

置換機能がアクティブ化された後、x 秒間 css クラスを入力に追加するにはどうすればよいですか? (入力が実際に置き換えられた場合のみ)

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

2 に答える 2

0

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

デモ。

于 2012-08-28T13:41:53.017 に答える
0

replace()jQuery ではなくネイティブ JavaScript です。最初に式をテストし、置換が必要かどうかを確認してから、クラスを起動できます。

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/

于 2012-08-28T13:43:53.473 に答える