Question

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});

如何比较用户插入的新值和输入中已存在的当前值？

Answer 1

这是你可以使用闭包的地方：

＆＃13;

  $("#myTextBox").on("change paste keyup", (function() {
    var previousValue = $("#myTextBox").val();
    return function() {
        var newValue = $(this).val();
        alert('Was ' + previousValue + " and now it's " + newValue);
        previousValue = newValue;
    };
})());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myTextBox" value="abc" />

＆＃13;

稍微复杂的闭包的原因：它创建一个名为previousValue的变量，其生命周期大于处理函数，但只能由此处理函数访问。保证不会与代码的其他部分发生命名冲突。

Answer 2

您可以将先前的值保存在元素本身上，并在值更改时获取它。

$("#myTextBox").on("change paste keyup", function() {
  // Get previous and current value
  var prevValue = $(this).data('value'),
    currValue = $(this).val();
  console.log(prevValue + ' === ' + currValue);

  // Update the prevValue
  $(this).data('value', currValue);
});

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

Answer 3

奇怪的是，输入的value属性在其值发生变化时实际上并未更新。因此，您只需将.val()与attr("value")进行比较，然后在进行更改后更新attr("value")：

E.G：

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).attr("value")+" vs "+$(this).val());
   $(this).attr("value",$(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myTextBox" value="abc" />

Answer 4

基本上，您可以保存JavaScript中的任何值，您可以保存或以3种常见方式保留以前的数据：

创建变量并设置为更改前的值
推送到数组
将其作为值添加到Object 等

你做的最好的方法是使用Variable，所以像这样： var previousValue = $（this）.val（）;

并在...之后访问它。

$("#myTextBox").on("change paste keyup", function () {
    var preValue = $(this).val();
    return function () {
        var newValue = $(this).val();
        consol.log('preValue: ' + preValue + 'newValue: ' + newValue);
        preValue = newValue;
    };
});

返回发生之后，所以它的工作方式就像回调一样，基本上它发生在后面，这样你就可以保存两个变量......

on（）观察输入的变化

4 个答案: