为什么 keyup 有效但 keydown 无效答案

【问题标题】：Why keyup works but keydown does not work为什么 keyup 有效但 keydown 无效
【发布时间】：2021-01-12 08:51:50
【问题描述】：

我有一个输入 type="number"，其中最小值为 1，最大值为 10。我想防止输入大于或小于 max 和 min 的值，所以我使用这个脚本：

$('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 jquery input keydown keyup

【解决方案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">

【讨论】：