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

【问题标题】：Prevent arrow keys from changing values in a number input防止箭头键更改数字输入中的值
【发布时间】：2014-08-03 05:55:06
【问题描述】：

我在网页上有一个类似这样的输入控件：

&lt;input type="number" name="value" /&gt;

如果此控件具有焦点并且我按下向上或向下箭头键，则文本框中的值会递增或递减（IE 除外）。

我想禁用此功能，最好使用 CSS。我已经使用 CSS 移除了微调按钮。我意识到我可以使用 JavaScript 来捕获 keydown 事件，但我想让箭头键继续向上或向下滚动页面。

【问题讨论】：

当您不想使用input type="number" 的基本功能时，为什么还要使用它？
部分重复：stackoverflow.com/questions/23372903/…
添加 step=0 就可以了
感谢 Jukka，使用 type="text" 很容易。抱歉，Rachel，没有这样做，至少在 Firefox 中没有
方向键仅在页面本身被聚焦时上下滚动页面。当输入具有焦点时，页面滚动无论如何都不能使用箭头。

标签： javascript html css input

【解决方案1】：

没有办法纯粹用 CSS 来完成您所描述的行为，因为 CSS 处理显示，我们在这里讨论的是行为和键盘事件。

我建议在您的输入中添加一个事件侦听器，这将阻止箭头键对其产生影响，而实际上不会阻止页面滚动且输入不在焦点上：

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

如果您希望在输入处于焦点的情况下通过箭头键滚动页面事件，我建议您使用 JQuery，它可以让您编写更少的代码并且支持所有浏览器。

【讨论】：

【解决方案2】：

您可以使用以下代码 (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" />

【讨论】：

【解决方案3】：

如果您使用的是 Angular，请尝试：

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

【讨论】：

【解决方案4】：

as you can see in this article you can use this CSS depends on browser that you used

    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

&lt;input type="number"&gt;

【讨论】：

【解决方案5】：

我知道这不是你想听到的答案，但你真的应该这样做吗？

仅仅因为在这种情况下，它不适合你，你似乎违背了浏览器和用户的预期行为，试图操纵某些东西去做它不适合做的事情。

作为用户，使用 Tab 键进入字段并能够使用向上和向下箭头来更改值是预期的行为。例如单击徽标带您回家，或按 Cmd/Ctrl + W 关闭窗口。如果有任何干扰，你最终会疏远用户，他们也会对你的界面失去信心。

即使使用标准的type="text" 框，向上和向下箭头也不会滚动页面，此功能似乎违背了所有标准。

说你没有给出这个问题的上下文，它可能是一个内部工具或私人使用，在这种情况下，JS 看起来像是要走的路！

【讨论】：

【解决方案6】：

哦，我只能使用 keydown 侦听器和以下过滤器来做到这一点：

const invalid = ['e', ',', '.', 'ArrowUp', 'ArrowDown'];
if (invalid.find(e => $event.key === e)) {
  $event.preventDefault();
}

就我而言，我也想禁止字符：e,.

【讨论】：