Блог

Я использую keypress event и хочу получить value внутри input поля после нажатия клавиши. Я также хотел бы зафиксировать, какая клавиша была нажата. В этом примере я разрешаю пользователю вводить числа только в input поле (я знаю, что есть number type для ввода). Я использую setTimeout для получения value из input поля. Есть ли лучший способ добиться этого? Это когда-нибудь завершится неудачей?

 var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function isNumber(evt, el) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 amp;amp; (charCode < 48 || charCode > 57)) {
    evt.preventDefault();
    return false;
  }
  setTimeout(function () {
    elResult.textContent = el.value;
  }, 0);
  return true;
}

elTest.addEventListener('keypress', function(e) {
  return isNumber(e, this);
});  

 <input id='test' />
<div id='result'>

</div>  

Я бы выбрал комбинацию прослушивателей событий keydown и keyup из-за того, что событие нажатия клавиши не запускается при возврате или удалении.

При нажатии клавиши проверьте количество, отмените ввод / удалите ввод и предотвратите, если необходимо.

При вводе обновите результат вывода из входного значения.

 var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function allowInput(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    var isNumber = charCode < 58 amp;amp; charCode > 47;
    var isBackspace = charCode == 8 || charCode == 46;
    return isNumber || isBackspace;
}

elTest.addEventListener('keydown', function (e) {
    if (!allowInput(e)) {
        e.preventDefault();
        return false;
    }
    return true;
});

elTest.addEventListener('keyup', function (e) {
    elResult.textContent = this.value;
});
  

Я думаю, вы только что получили событие, и эти объекты смешались во время вызова функции. Если вы используете this.value , то число еще не будет там, но если вы используете event.key (который выдает строковое значение ключа), то вы должны получить правильный вывод.

 var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function isNumber(evt, el) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 amp;amp; (charCode < 48 || charCode > 57)) {
    evt.preventDefault();
    return false;
  } else {
    elResult.textContent  = evt.key;
  }
  return true;
}

elTest.addEventListener('keypress', function(e) {
  return isNumber(e, this);
});  

 <input id='test' />
<div id='result'>

</div>