HTML 输入数字步骤无需验证

Question

在 HTML 中，您可以将

step

属性添加到数字类型的输入。我想要这个，因为我喜欢它如何通过仅按向上/向下键来简化用户的输入。

我发现这个属性的另一个特点是，它强制用户停留在那个区间。 HTML 通过验证来实现这一点。您可以手动输入任何值，但它不会让您提交表单。 我不想要这个！

为了解决这个问题，我发现在

novalidate

标签中使用了一个

<form>

属性，效果非常好。但遗憾的是，浏览器支持很差。

我想我需要删除

step

属性并通过触发其上的 keydown 事件来使用 JavaScript/jQuery 自己编写功能。

Answer 1

但遗憾的是，浏览器支持很差。

这不是真的。根据 MDN 的说法，IE 从版本 10 开始支持

novalidate

属性，从版本 10 开始也支持

input[type=number]

。这意味着如果浏览器支持数字输入，它很可能也支持

novalidate

属性。

Answer 2

这是一个 React 实现，但有一种方法可以实现这一点。本质上：

• 将

  step

  设置为

  "any"

  （有效禁用浏览器对值的限制，不应用验证，但步进器仍然出现）
• 控制来自JS的输入值
• 使用

  inputType

  来区分键入/粘贴输入与步进器/箭头输入来跟踪步进器/箭头更改
• 通过鼠标事件检测步进/箭头事件，手动将更改应用于输入值

请参阅工作示例此处。