Почему keyup работает, а keydown не работает

У меня есть тип ввода = число, где минимальное значение равно 1, максимальное равно 10. Я хочу предотвратить ввод значения больше или меньше, чем максимальное и минимальное, поэтому я использую этот скрипт:

$('input[name=inputModal1]').keyup(function(){
if($(this).val()>10){
  $(this).val(10);
}else if($(this).val()<1){
  $(this).val(1);}
});
$('input[name=inputModal2]').keydown(function(){
if($(this).val()>10){
  $(this).val(10);
}else if($(this).val()<1){
  $(this).val(1);}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="inputModal1" min="1" max="10" value="1">
<input type="number" name="inputModal2" min="1" max="10" value="1">

В таком виде скрипт работает, но я хочу использовать keydown, он предотвращает ввод большего или меньшего значения, чем максимальное и минимальное значение, но keyup дает больше или меньше ввода, если пользователь нажимает и удерживает кнопку. В чем может быть причина того, что keydown не работает? Я могу удалить значение, сделать его больше 10 и т. д.

Дайте мне знать, если вам нужна дополнительная информация.


javascript input jquery keydown keyup
person Hi_TecH    schedule 12.01.2021    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вопрос в порядке событий. keydown срабатывает для элемента до того, как значение было установлено. Поэтому $(this).val() равно '', когда событие срабатывает, что сбивает с толку вашу логику.

Чтобы устранить эту проблему и улучшить поведение, используйте вместо этого событие input. Это работает так, как вам нужно, а также срабатывает, когда пользователь добавляет содержимое к элементу любым способом - например, вставляя с помощью мыши.

Кроме того, вы можете использовать Math.min() и Math.max(), чтобы сделать вашу логику более лаконичной. Попробуй это:

$('input[name=inputModal]').on('input', function() {
  $(this).val((i, v) => Math.max(Math.min(this.value, 10), 0));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="inputModal" min="1" max="10">

person Rory McCrossan    schedule 12.01.2021