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

あなたのコードを最初に使用するときsomethingChangedは、 でfalse何かが変更されたときですが、textareaと同じであるため、ロジックが間違っていると思います。これは、値が常に同じであり、「古い」値を検出していないことを意味します。、何かが変更されたかどうかを検出しているだけで、これは常に.somethingChangedtrueoldValue1objTextBox1.valuetextareatrue

例えば

コードを使用した結果:

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

（「オスカー」は常に「オスカー」であるため、古い値は取得されません）

古い値を取得する場合、正しいロジックは次のようになります。

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

（「osca」は「oscar」を書き終える前の古いテキストであるため、これを実現したい場合は、ロジックを再度作成する必要があります）

私が書いたことによると、 を使用するsetInterval必要はありません。 を使用して必要なことを再作成しようとしていkeyUpます。

jQuery ではなく JavaScript を使用する:

説明: ユーザーが何か ( keyup) の入力を終了すると、どちらでも問題ありません。検出メソッドは(最初の瞬間textareaの値) を探し、それが変更されたかどうかを確認します。defaultValuetextarea

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 に答える
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 に答える