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

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

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

Любые идеи?

Answer 1

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

Answer 2

Это просто, просто используйте OnKeyUp вместо OnKeyPress

Answer 3

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

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

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

РЕДАКТИРОВАТЬ: (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 служит закрытием вокруг переменной PrevValue. Это предотвращает загрязнение пространства имен, поэтому мне не нужно создавать глобальную переменную или прикреплять свойство к самому элементу ввода. Это настолько элегантно, насколько я могу получить. Я на самом деле написал свой в jQuery, но подумал, что сам ответ должен быть чистым JavaScript ...

Answer 5

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

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