如何使用jQuery获取在输入框中输入的先前文本值

时间:2015-06-17 18:06:27

标签: javascript jquery

我需要你的帮助,

我是jQuery的新手,我不知道如何获取在3个文本框中输入的上一个文本。

以下是javascript以及HTML编码:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">
        window.onload = function() {

            $('#one, #two, #three').change(function(e) {

                alert(e.target.value)

            });


        }
    </script>

</head>

<body>

    <input type="text" id="one">

    <input type="text" id="two">

    <input type="text" id="three">

</body>

</html>

2 个答案:

答案 0 :(得分:2)

解决方案是将值缓存在对象中。这是我能想象到的最干净的方式。

var values = {};
$('#one, #two, #three').change(function(e) {

  // Get the text from cache, dynamically
  var prevText = values[e.target.id] || "";

  // Show something to the user
  alert("Modified: " + e.target.value + " | Old: " + prevText);

  // Update the text in cache
  values[e.target.id] = e.target.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="one">
<input type="text" id="two">
<input type="text" id="three">

或者,您可以直接将旧值存储在元素对象中,但我不建议以这种方式污染它(除非您小心操作):

$('#one, #two, #three').change(function(e) {
  var el = e.target;
  alert("Modified: " + e.target.value + " | Old: " + (el._old_value || ""));
  el._old_value = e.target.value;
});

答案 1 :(得分:0)

您可以将旧值存储在元素

的数据属性中
  $('#one, #two, #three').change(function(e) {
      alert($(e.target).data('oldVal'))  
      $(e.target).data('oldVal', e.target.value)
})

虽然初始值未定义,但您可以接受该值或使用一些初始化代码根据您的要求将其设置为“”

也只是一个FYI,因为你说你是jQuery的新手

$('.preserves-old-value').change(function(e) {
  alert($(e.target).data('oldVal'))  
  $(e.target).data('oldVal', e.target.value)
})

在没有硬编码ID的情况下也能正常工作。您可以将类保留旧值放在您想要的任何输入上

https://jsfiddle.net/sgo1qmtu/