0

目前，我通过用不同的变量捕获它们的值来为每个文本区域使用相同的 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);
4

4 回答 4

0

您可以尝试使用更改事件，而不是使用 setInterval 跟踪更改以密切关注更改。

$(function() {

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

});​

检查演示

仅使用 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>
​
于 2012-10-05T17:18:00.527 回答
0

您最初将您的问题标记为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;
}
于 2012-10-05T17:19:55.937 回答
0

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

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

您还需要对存储和更新值的变量做些什么？

于 2012-10-05T17:20:26.080 回答
0

我认为您的逻辑是错误的，因为在第一次使用您的代码时，当, somethingChangedis但与，您只是在检测 中是否发生了变化，这将始终给您。falsetextareasomethingChangedtrueoldValue1objTextBox1.valuetextareatrue

例如

使用您的代码的结果：

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

（因为“奥斯卡”永远是“奥斯卡”，所以你没有得到任何旧值）

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

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

（因为“osca”是写完“oscar”之前的旧文本，如果这是你想要达到的情况，你需要重新制定你的逻辑）

根据我写的，你不需要使用任何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;
});
于 2012-10-05T17:31:44.223 回答