时间戳

首页 > 解决方案 > 为什么 keyup 有效但 keydown 无效

javascript - 为什么 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，等等。

如果您需要更多信息，请与我们联系。

标签： javascriptjqueryinputkeydownkeyup

解决方案

问题与事件的顺序有关。在设置值之前keydown触发元素。因此，当事件触发时，这会混淆您的逻辑。$(this).val()''

要解决此问题并改进行为，请改用input事件。这可以根据您的需要工作，并且当用户以任何方式向元素添加内容时也会触发 - 例如通过鼠标粘贴。

此外，您可以使用Math.min()andMath.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">

推荐阅读