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

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

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 исключительно, если бы знал способ проверить, изменил ли ключ значение или нет, но некоторые символы (например, клавиши со стрелками) не влияют на значение поля.

какие идеи?

10
fromcharcode javascript keycode onkeypress onkeyup

6 ответов

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

3

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

4

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

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

вот мое окончательное решение, которое использует переменную 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...

1

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

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

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

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

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