更改 : zero and empty 时的 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.
    }
});

这将处理原始值非空且用户将其更改为 0 的情况。

jsfiddle

---

问题源于 change 事件在 blur 事件之前触发。如果值为 0，您可以检查 change 事件处理程序，但您不知道原始值是空值还是非空值。如果它是空的，你不想把它当作一个变化，但如果它是非空的，我假设你确实想把它当作一个变化。

我能看到的唯一解决方案是跟踪原始值，这样您就可以自己测试更改。