Question

我正在使用以下JS来确保数字键影响文本字段输入，使用户可以向上或向下按下以更改文本字段的输入数量。

请注意，交换到数字字段不是一个可行的选项，它需要保留一个文本字段。

目前，当您使用.focus（）单击输入字段时，此代码有效，但是当您单击输入外的任何位置时，页面会滚动（应该）以及输入的数字更改（我需要）防止这种情况。）

我只想在输入被聚焦时执行此代码，因此当点击页面中的任何其他位置时，向上和向下箭头将像往常一样滚动页面，而不会影响文本输入数字。

我已尝试在每一行中使用event.preventDefault（）和event.stopPropagation（）来尝试阻止它，但我必须遗漏一些东西。我对JS不是很了解，所以对我来说并不是很明显，经过几个小时的搜索和阅读文档后，我仍然没有运气。

提前致谢！

jQuery(document).ready(function($) {

  var $input = $('input.qty[type="text"]');

  $input.focus(function() {
    $(document).on('keydown', function(event) {
      if (event.which == 38 || event.which == 104) {
        $input.val((parseInt($input.val()) + 1));
      } else if (event.which == 40 || event.which == 98) {
        $input.val((parseInt($input.val()) - 1));
      }
    });
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" type="text">

Answer 1

这样做：

＆＃13;

jQuery(document).ready(function ($) {
    var $input = $('input.qty[type="text"]');
    // $input.focus(function() { 
        $input.on('keydown', function (event) {
            if (event.which == 38 || event.which == 104) {
                $input.val((parseInt($input.val()) + 1));
            } else if (event.which == 40 || event.which == 98) {
                $input.val((parseInt($input.val()) - 1));
            }
        }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class = "qty">

＆＃13;

只需添加if($input.is(":focus"))检查以检查您的输入是否具有焦点。

<强> - 编辑 -

正如所指出的，事件keydown并不需要附加到整个文档。将其附加到输入将更好，并且还将解决焦点问题。更新了代码段。

Answer 2

只需将代码更改为仅触发input元素上的keydown事件函数。

你的代码也存在一些缺陷：

将$(document).on(...)事件处理程序绑定到 $input.focus事件中会导致代码每次时都附加一个新的事件处理程序输入字段，导致它多次触发。首先它在/减少1，然后减少2,3等

您可能希望首先检查输入的值是否为有效数字，否则您将获得NaN作为值。

为什么不首先使用type="number"？大多数浏览器都包含您所需的功能＆＃34;免费＆＃34;对于这种类型，并在顶部点击一些箭头。

＆＃13;
＆＃13;
$(document).ready(function($) { var $input = $('input[type=text]'); // use $input instead document here $input.on('keydown', function(event) { var val = parseInt($input.val(),10); if (isNaN(val)) { val = 0; } if (event.which == 38 || event.which == 104) { val++; } else if (event.which == 40 || event.which == 98) { val--; } $input.val(val); }); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" /> <div> Input with "type='number'" does this automatically:<br> <input type="number" /> </div>
＆＃13;
＆＃13;
＆＃13;

只是为了好玩，一个花哨的ES6版本看起来如下：

$input.on('keydown', function(event) { let val = parseInt($input.val())||0; val=([38,104].includes(event.which))?++val:[40,98].includes(event.which)?--val:val; $input.val(val); });

如何在页面上的任何其他位置单击时停止jQuery .focus（）函数

2 个答案: