禁用<input type="number">中的直接数值编辑功能

Question

我一直在使用<input type="number">。但我不希望用户手动输入数字到输入框中，而是只能通过逐步增加或减少来修改数字。请问这是否可能实现？

- Devang Kateliya

---

试试这个：Spinner - jQuery UI - pes502

我不认为可以通过那种方式禁用一个元素的特定功能，但是通过创建两个自己的按钮并使输入只读，可以实现复制。 - scragar

Answer 1

您可以通过取消 keydown 事件来实现。可以使用内联方式 (<input type="number" onkeydown="return false">) 或事件处理程序。

- blockhead

---

如果我将一个数字粘贴到上面会发生什么？或者使用一个无法注册按键按下事件（但可以注册按键按下）的虚拟键盘。 - scragar

Answer 2

使用 jQuery。

$('input[type="number"]').keydown(function (e) {
  e.preventDefault();
});

- Sridhar R

Answer 3

使用readonly属性来输入。

<input type="number" readonly>

演示

- Bhushan Kawadkar

---

他们想要在输入框中显示箭头，只读模式会将它们隐藏。这不是对用户问题的回答。 - scragar

@scragar，但是PO没有提到他想要使用内置箭头还是有额外的按钮来增加/减少。 - Bhushan Kawadkar

在这种情况下，你也应该发布代码来提供增加或减少值的方法。由于你没有这样做，所以我会给它点踩，因为它没有按照问题要求进行回答。 - scragar

在这种情况下，让PO决定，那是他正在寻找的吗。 - Bhushan Kawadkar

我认为楼主已经清楚地表明了：“我不希望用户能够手动输入数字到输入框中。用户只能通过逐步增加和减少数字来更改值。” 逐步 - Yaje