使用on()函数来监测输入变化

Question

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

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

- Jennifer

---

你需要将原始值保存在一个变量中。据我所知，DOM没有这些信息。 - Jeroen

Answer 1

这是使用闭包的地方：

  $("#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;
    };
})());

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

略微复杂的闭包原因是：创建一个名为previousValue的变量，其生命周期比处理程序函数长，但只能由此处理程序函数访问。这样可以确保在代码的其他部分不会出现名称冲突。

- Andrew Shepherd

---

好的解决方案！我一直在考虑如何在TextBox的clickEvent中检索先前的值，但是您的解决方案更加简洁易懂。 - Sapikelio

这种情况下为什么需要一个函数？而且这是一个返回函数？我不理解函数部分，函数会在后面执行吗？如果是的话，返回值是什么？ - Jennifer

@Jennifer - 外部函数直接调用一次，名为onetime。它生成一个新的函数作为处理程序。这个处理程序函数在每次更改时被调用，并且可以访问previousValue变量。 这是一个关于JavaScript闭包的页面：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures - Andrew Shepherd

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" />

- Tushar

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" />

- Moob

---

选择元素怎么样？ - Jennifer

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Moob

Answer 4

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

1. 创建一个变量并将其设置为更改之前的值
2. 推送到数组
3. 将其添加到对象作为值等。

最好的方法是使用变量，例如：

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;
    };
});

返回发生在之后，所以它的工作方式类似于回调函数，基本上是在之后发生的，这样你就可以保存两个变量...

- Alireza

---

4. 高效正确地使用Markdown。希望这有所帮助。

- Praveen Kumar Purushothaman

谢谢兄弟，是的，由于某些原因，我的SOF没有接受我的CRTL + K :) - Alireza