キープレスのテキストフィールドの新しい値を確認するにはどうすればよいですか？

Question

単一のフォームフィールドがあり、フィールドがいつ変更されて追加のコードを実行するかを検出できる必要があります。 新着 フィールドの価値。キーが実際にテキストボックスの値を変更した場合にのみ、コードを実行したいと思います。これが私が思いついた解決策です。

function onkeypress(e) {
  var value = this.value;
  // do something with 
}

function onkeyup(e) {
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys
    this.onkeypress(e);
  }
}

ただし、問題は1つだけです。 Onkeypressは、フィールドの値が更新される前に解雇されるため、値をつかむと、以前の値が得られます。キーが値を変更したかどうかをテストする方法を知っていれば、キーアップのみを使用しますが、一部の文字（矢印キーなど）はフィールドの値に影響を与えません。

何か案は？

Answer 1

私がこれをする方法は、単にの線に沿って変数を使用することです prevValue. 。キープレス関数の最後に、その変数に値を保存し、値がその前の値に等しくない場合にのみ関数を再度実行します。

Answer 2

これは簡単です、Onkeypressの代わりにKeyUpを使用するだけです

Answer 3

別の条件を持っています：

if(e.keyCode > 31  && e.keyCode < 127) {
    value = this.value + e;
}

これにより、特別なchar範囲の外側のキーボードに入力された低レベルのASCIIシンボルがキャッチされます。

編集：（32はスペースです）

function onkeyup(e) {        
  if ( e.which == 8 || e.keyCode == 46 ) { // delete or backspace keys 
    switch(e.keyCode) {
      case 32:
      case 48..90:
      case 96..111:
      case 188:
      case 190..192: 
      case 219..222:
          value = this.value + e;
          break;
      default: 
          break;
    }       
    this.onkeypress(e);        
  }        
}

Answer 4

これが私の最後のソリューションです。これは、Prevvalue変数を使用しますが、グローバルネームスペース（ウィンドウ）またはDOM要素のプロパティを汚染しません。

(function() {
  var input = document.getElementById('input_box'),
      prevValue;

  input.onkeyup = function(e) {
    if ( this.value != prevValue ) {
      prevValue = this.value;
      // execute some more code here...
    }
  }
}());

上記の場合、OnKeyUp関数は、前Value変数の周りの閉鎖として機能することに注意してください。これにより、名前空間汚染が防止されるため、グローバル変数を作成したり、入力要素自体にプロパティを接続する必要はありません。これは私が得ることができる限りエレガントです。私は実際にjqueryで私のものを書きましたが、答え自体は純粋なJavaScriptであるべきだと思いました...

Answer 5

それは一種のハックですが、以前の値をテキストボックスのプロパティに配置できます（「Expando Attributes」と呼ばれる）

function onkeypress(e) {
  this.oldvalue = this.value;
}

function onkeyup(e) {
  if (this.value != this.oldvalue) {
    // do something
  }
}

Answer 6

古い価値を保存して、それが変更されたかどうかを検出できます。

function keyUpHandle(e) {
  if (this.prevValue && this.prevValue != this.value) {
    // do something
  }
  this.prevValue = this.value;
}