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

您可以使用以下代码

HTML

<input type="number" min="1.01" max="1000" id="num"/>

CSS

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

JavaScript的：

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

您可以在此处找到工作示例：http://jsfiddle.net/649d66bb/

Answer 3

如果你使用 angular 试试这个

Answer 4

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

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

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

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

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

Answer 5

哦，我只能通过keydown监听器和以下过滤器来实现：

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

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

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

5 个答案: