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的情况。

jsfiddle

问题源于change事件在blur事件之前触发的事实。您可以检查change事件处理程序，如果值为0，但您不知道原始值是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 建议的那样，您应该在if处理程序中添加change - 检查以忽略<input> value的情况} {是0，如下：

$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处理程序。

更改时的jquery输入：零和空

3 个答案: