为什么 keyup 有效但 keydown 无效

Question

我有一个输入类型="数字"，其中最小值为 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，等等

如果您需要更多信息，请告诉我。

Answer 1

问题与事件的顺序有关。 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">

为什么 keyup 有效但 keydown 无效

Why keyup works but keydown does not work

javascript

jquery

input

keydown

keyup