変更時のjquery入力：ゼロと空白

Question

jQueryの.on('change')イベントを使用して、入力フィールドの値が変更されたかどうかを検出しています。ユーザーは、0を入力する場合は、最初は空の入力フィールドのために、入力フィールドがクリアされ、値は以下のように、変化しないと考えられる。

HTML：

<input id=number type=text> 

のjQuery：

var $number = $('#number'); 
$number.on('blur', function() { 
    if (this.value == 0) { 
    this.value = ''; 
    } 
}); 

$number.on('change', function() { 
    console.log('Changed.'); 
}); 

イベントchangeは、ユーザーがゼロを入力すると常にトリガーされます。どのように起こるのを防ぐには？

Answer 1

何をしたいあなたは、元の値を格納するfocusイベントハンドラを使用して、値がで自分のために変更するかどうかを決定できていると思いますblurイベントハンドラ

var $number = $('#number'); 
$number.on('focus', function() { 
    var $input = $(this); 
    $input.data('originalValue', $input.val()); 
}); 
$number.on('blur', function() { 
    var $input = $(this); 
    if ($input.val().trim() == '0') { 
     $input.val(''); 
    } 
    if ($input.val() != $input.data('originalValue')) { 
     // Put code to handle a change here. 
    } 
}); 

これは、元の値が非emtpyであり、ユーザが0に変更した場合を処理します。

​​

---

問題はchangeイベントが発生blurイベントの前に事実に由来します。値が0の場合はchangeイベントハンドラをチェックインできますが、元の値がemtpyであるか空でないかはわかりません。それがemtpyならば、あなたはそれを変更として扱いたくはありませんが、空でなければ、それを変更として扱いたいと思っています。

私が見ることができる唯一の解決策は、あなた自身が変更をテストできるように、元の値を追跡することです。提案

Answer 2

私は、これはあなたが

var number = $('#number'); 

number.on('change', function() { 
    if ($(this).val() == 0) 
    { 
     $(this).val(''); 
     return false; 
    } 
    else 
    { 
     //do Your stuff here 
    } 

); 

var number = $('#number'); 
 

 
    number.on('change', function() { 
 
     
 
     if ($(this).val() == 0) 
 
     { 
 
      $(this).val(''); 
 
      return false; 
 
     } 
 
     else 
 
     { 
 
      alert("value enter 0"); 
 
      //do Your stuff here 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id=number type=text>

Answer 3

currarpickt として<input>のvalueが0ある場合、あなたはそのようなケースを無視するようにchangeハンドラでif -checkを追加する必要があります

$number.on('change', function() { 
    // Return early if the value should be ignored 
    if(this.value === '0') { 
    return; 
    } 

    // Do your stuff here 
}); 

がアクションhereでそれを参照してください。先制blurハンドラ内に入力値を変更する試みがchangeハンドラによって見られないように

はまた、blurイベントが発生を後changeイベントに気付きます。