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

Question

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

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

Есть идеи?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Это поймает любой символ низкого уровня 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 5

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

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

Answer 6

Это что-то вроде хака, но вы можете поместить предыдущее значение в свойство текстового поля (называемое «атрибуты раскрытия»).