使用纯HTML设置友好的数字输入

仅数字输入并不像你想象的那么简单。大多数人会本能地使用type="number"属性，但这可能还不够。确实，它在移动设备上显示了数字键盘，但允许用户输入非数字字符。而且，在桌面上，上下箭头对于输入PIN码或信用卡号码等内容并不特别有用。

相反，我们可以使用inputmode="numeric"。这确保了移动设备键盘仅为数字，甚至不包括一些可用的符号。我们还应该添加pattern="[0-9]+"来限制输入值。至于type属性，那就取决于你。无论是type="text"还是type="number"都可以正常工作。

<label>
  PIN码
  <input type="text" inputmode="numeric" pattern="[0-9]+"" />
</label>

[!IMPORTANT]

大多数浏览器都不会验证输入是否仅为数字，即使对于type="number"也是如此。这与数字输入通常接受科学计数法（例如1e3）有关，这意味着你需要自己编写一些验证逻辑。