防止箭头键更改数字输入中的值

Question

我在网页上有一个输入控件,类似于:

<input type="number" name="value" />

如果此控件具有焦点并且我按下向上或向下箭头键,则文本框中的值递增或递减(IE中除外).我想禁用此功能,最好使用CSS.我已经使用CSS删除了微调按钮.我意识到我可以使用JavaScript来捕获keydown事件,但我想允许箭头键继续向上或向下滚动页面.

Answer 1

没有办法完成你纯粹用CSS描述的行为,因为CSS处理显示,我们在这里谈论行为和键盘事件.

我建议在你的输入中添加一个事件监听器,这将阻止箭头键对它产生影响,而实际上阻止了输入的页面滚动不在焦点上:

document.getElementById('yourInputID').addEventListener('keydown', function(e) {
    if (e.which === 38 || e.which === 40) {
        e.preventDefault();
    }
});

如果输入是焦点,如果你想要箭头键滚动页面事件,我建议使用JQuery,这将允许你编写更少的代码,它将支持所有的浏览器.

Answer 2

如果您使用 Angular，请尝试：

<input type="number"onwheel="return false;" (keydown.arrowup)="(false) (keydown.arrowdown)="(false)"/>

Answer 3

您可以使用以下代码（JSFiddle）：

$(document).ready(function() {
  $("input[type=number]").on("focus", function() {
    $(this).on("keydown", function(event) {
      if (event.keyCode === 38 || event.keyCode === 40) {
        event.preventDefault();
      }
    });
  });
});

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1.01" max="1000" id="num" />