Как проверить новое значение текстового поля при нажатии клавиши?

У меня есть одно поле формы, и мне нужно уметь определять, когда поле изменяется, и выполнять дополнительный код с помощью новая значение поля. Я хочу выполнить код только в том случае, если нажатый ключ фактически изменяет значение текстового поля. Вот решение, которое я придумал.

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);
  }
}

есть только одна проблема. onkeypress запускается до обновления значения поля, поэтому, когда я хватаю значение, я получаю Предыдущее значение. Я бы использовал keyup исключительно, если бы знал способ проверить, изменил ли ключ значение или нет, но некоторые символы (например, клавиши со стрелками) не влияют на значение поля.

какие идеи?

6 ответов


то, как я это делаю, просто с переменной вдоль строк prevValue. В конце функции нажатия клавиши сохраните значение в этой переменной и выполните функцию снова, только если значение не равно предыдущему значению.


Это легко, просто используйте onkeyup вместо onkeypress


есть еще одно условие:

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

это поймает любой символ ascii низкого уровня, введенный клавиатурой за пределами специального диапазона символов.

EDIT: (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);        
  }        
}

вот мое окончательное решение, которое использует переменную 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 служит замыканием вокруг переменной prevValue. Это предотвращает загрязнение пространства имен, поэтому мне не нужно создавать глобальную переменную или присоединять свойство к самому входному элементу. Это самое элегантное, что я могу сделать. Я на самом деле написал свой в jQuery, но подумал о самом ответе должен быть чистый JavaScript...


это своего рода хак, но вы можете поместить Предыдущее значение в свойство textbox (называемое "атрибуты expando")

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

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

вы можете сохранить старое значение и определить, изменилось ли оно:

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