Question

目前，我通过使用不同的变量捕获它们的值，为每个文本区域使用相同的JS代码。

是否有任何方法可以为页面中的每个文本区域重复使用相同的代码，因为每页有20/30的文本区域。请建议吗？

<textarea id="TextArea1" class="txtClass" cols="20" rows="2"></textarea>
<textarea id="TextArea2" class="txtClass" cols="20" rows="2"></textarea>

JS脚本

objTextBox1 = document.getElementById("TextArea1");
oldValue1 = objTextBox1.value;

objTextBox2 = document.getElementById("TextArea2");
oldValue2 = objTextBox2.value;

var somethingChanged = false;

function track_change()
  {
    //for text box 1 change
    if(objTextBox1.value != oldValue1)
     {
       oldValue1 = objTextBox1.value;
       somethingChanged = true;
     }

    //for text box 2 change
    if(objTextBox2.value != oldValue2)
     {
       oldValue2 = objTextBox2.value;
       somethingChanged = true;
     }

   } 

  setInterval (function() { track_change()}, 100);

Answer 1

您可以尝试使用更改事件，而不是使用setInterval跟踪更改，以便在更改中保留选项卡。

$(function() {

    var somethingChanged = false;
    $('.txtClass').on('change', function(){
         somethingChanged = true;
        alert('Something Changed !!');
    });    

});

Check DEMO

仅使用Javascript ..您可以试试这个

<textarea id="TextArea1" class="txtClass" cols="20" onchange="Changed(this)" rows="2"></textarea>
<textarea id="TextArea2" class="txtClass" cols="20" onchange="Changed(this)" rows="2"></textarea>
<script type="text/javascript">
    var somethingChanged = false;
    function Changed(elem){

        somethingChanged = true;
        alert('Something Changed !!');
    };

</script>

Answer 2

您最初将自己的问题标记为jquery。您没有使用jquery。如果你这样做，那么减少代码重复就非常简单了：

$("textarea").data('oldValue', function () { $(this).val(); })
   .on('change', function () {
      if ($(this).val() != $(this).data('oldValue') {
         somethingChanged = true;
      }
   });

如果您实际上不能或不想使用jQuery，您仍然可以使用getElementsByTagName或可能querySelectorAll来执行此操作。

for (elem in document.getElementsByTagName('textarea')) {
   elem.data.oldValue = this.innerHTML;
}

Answer 3

你绝对可以使用元素的jquery绑定。更多细节http://api.jquery.com/change/

$('.txtClass').change(function() {
  alert('Handler for .change() called.');
});

您还需要对存储的变量以及更新值进行更多操作吗？

Answer 4

我认为您的逻辑是错误的，因为在使用您的代码时，somethingChanged首次false为textarea，当somethingChanged中的某些内容发生变化时，true为{ {1}}但oldValue1与objTextBox1.value相同，这意味着值始终相同且您未检测到任何＆＃34; 旧＆＃34;值，您只是检测textarea中的某些内容是否发生了变化，这将始终为您提供true。

<强> e.g

结果使用您的代码：

oldValue1 ：oscar / objTextBox1.value ：oscar / somethingChanged = true;

（因为＆＃34;奥斯卡＆＃34;将永远是＆＃34;奥斯卡＆＃34;，所以你没有得到任何旧值）

如果您打算获取旧值，正确的逻辑将是这样的：

oldValue1： osca / objTextBox1.value ：oscar / somethingChanged = true;

（因为＆＃34; osca＆＃34;是完成写作之前的旧文本＆＃34;奥斯卡＆＃34;，如果这是你想要实现的情况，你需要制作再次你的逻辑）

根据我写的内容，您不需要使用任何setInterval，我只是尝试使用keyUp重新创建您需要做的事情，看看：

使用javascript，而不是jQuery：

解释：当用户输入完成内容（keyup）时，textarea无关紧要，检测方法会查找defaultValue （第一时间的textarea值）并检查它是否已更改。

的 HTML： 的

<textarea id="TextArea1" class="txtClass" cols="20" rows="2" onKeyup="detect(this);"></textarea> <textarea id="TextArea2" class="txtClass" cols="20" rows="2" onKeyup="detect(this);"></textarea>

的 JS： 的

function detect(elem){ if(elem.defaultValue != elem.value){ somethingChanged = true; alert("text changed!"); } };

使用jQuery：

就这种情况而言，我会推荐你这个插件：

http://www.zurb.com/playground/javascripts/plugins/jquery.textchange.min.js

然后你就这样做了：

现场演示： http://jsfiddle.net/oscarj24/bs8hJ/2/

$('textarea').bind('textchange', function (event, previousTxt) { somethingChanged = true; });

我们可以为页面中的所有文本区域重用相同的代码吗？

4 个答案:

使用javascript，而不是jQuery：

使用jQuery：