Получить значение ввода нажатием клавиши нажатия и захвата

Question

Я использую keypressevent, и я хочу получить value в поле input после нажатия клавиши. Я также хотел бы зафиксировать, какой ключ был нажат. В this example Я только разрешаю пользователю вводить цифры в поле input (я знаю, что для входов) есть numbertype. Я использую 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 && (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>

Answer 1

Я бы с комбинацией 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 && 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; 
}); 

Answer 2

Я думаю, что вы только что получили событие, и это объекты смешанного во время вызова функции. Если вы используете 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 && (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>