「type="number"」的坑

正文

在你处理「只允许输入0-9数字」的需求的时候，你可能很容易想到<input>标签的type="number"。于是乎，你就这么干了。通常，你会在键盘上乱输入一通（比如，依次输入“a,b,c,d, ”），然后发现，咦，竟然都无法输入，那岂不是大功告成？

等等，别高兴太早！

接下来，你打开控制台，准备看看控制台报了什么错？却发现并没有任何错误提示。那么，究竟发生了什么呢？

原来，<input>标签的type="number"属性，虽然它可以防止用户输入非数字字符，但是，它并不会阻止用户输入小数点。也就是说，用户仍然可以输入像1.23这样的数字。

这就很尴尬了。

那要如何解决这个问题呢？

其实，解决这个问题的方法也很简单，只需要在<input>标签中添加step="1"属性即可。这样，用户就只能输入整数了。

<input type="number" step="1">

注意：step属性的值可以是任何正数，它表示用户每次按一下箭头键时，输入框中的数字增加或减少的量。

到这里，我们已经解决了第一个坑了。

继续往下看，你可能还会发现，<input>标签的type="number"属性，并不会限制用户输入负数。也就是说，用户仍然可以输入像-123这样的数字。

这又是一个坑。

那要如何解决这个问题呢？

解决这个问题的方法也很简单，只需要在<input>标签中添加min="0"属性即可。这样，用户就只能输入非负数了。

<input type="number" step="1" min="0">

注意：min属性的值可以是任何数字，它表示用户可以输入的最小值。

现在，我们已经解决了第二个坑了。

再往下看，你可能还会发现，<input>标签的type="number"属性，并不会限制用户输入小数点后面的位数。也就是说，用户仍然可以输入像1.23456789这样的数字。

这又是一个坑。

那要如何解决这个问题呢？

解决这个问题的方法也很简单，只需要在<input>标签中添加maxDecimals="2"属性即可。这样，用户就只能输入小数点后两位的数字了。

<input type="number" step="1" min="0" maxDecimals="2">

注意：maxDecimals属性的值可以是任何正整数，它表示用户可以输入小数点后最多的小数位数。

现在，我们已经解决了第三个坑了。

到这里，我们已经解决了<input>标签的type="number"属性的三个坑了。

现在，你可以放心地使用<input>标签的type="number"属性了。

总结

在使用<input>标签的type="number"属性时，你需要注意以下几点：

• type="number"属性并不会阻止用户输入小数点。
• type="number"属性并不会限制用户输入负数。
• type="number"属性并不会限制用户输入小数点后面的位数。

为了避免这些坑，你可以在<input>标签中添加以下属性：

• step="1"：限制用户只能输入整数。
• min="0"：限制用户只能输入非负数。
• maxDecimals="2"：限制用户只能输入小数点后两位的数字。