H5 中数字 input 的处理

对于数字相关的输入，咱们会使用 HTML5 提供的 type="number" 来处理。number 类型的 input 只容许咱们输入与数字有关的内容（0-9，小数点、正负号以及表示科学计数法的 e）

能够在下面的输入框中尝试一下 type="number" 的 input :

然而在实际的业务场景中，type="number" 并不能知足咱们，好比禁止输入小数点和正负号的需求。由于在输入 . + - e 的时，input 的 onChange 事件时不会有响应的，除非当输入是一个合法的数字。例如咱们输入 ----1 或者 ....3 时，onChange 并不会有任何反应。也即咱们失去了对 input value 的判断机会。

固然，利用 onKeyUp 或者 onKeyDown 来监听按键来进行控制也是能够的。不过我更喜欢换回 type="text" 配合正则进行处理。这招在 PC 端上问题不大，可是在移动端上却会产生另外一个问题——唤起键盘的样式。

---

在移动端中，input 的 type="number" 唤起的是数字键盘；type="text" 时唤起的是英文键盘。所以当遇到禁止输入小数点、正负号的需求时，要么说服产品，要么就只能本身想办法。不过现实中咱们每每会（无奈地）选择后者。

一个虚拟键盘应该能够知足各类需求。不过，本身实现虚拟键盘不只费时费力，极可能还要根据不一样的系统进行样式的修改，若是没有现成的库显然是不太实际的方案。

那又可否利用 onKeyUp 和 onKeyDown 事件呢？然而手机（个人是小米）上 . + - 的按键都是 229，很显然这是没有办法作判断的。若是第一个就输入 . + -，那么 e.target.value 是空。即使是合法的数字如 -1、+1 也不知足禁止输入 + - 的需求。

那么是否是就没有办法了呢？再次梳理一下需求，在移动端咱们须要点击 input 时唤起数字键盘，而且不容许输入非数字外的值（包括小数点、正负号）。

查看 MDN 以后发现 HTML5 中 input 有个 tel 的 type。<input type="tel" /> 正好能够知足咱们的需求。顾名思义 type="tel" 是用来输入电话号码的，唤起的是号码键盘（与数字键盘很类似）。尽管不是真正的数字键盘(iOS 上能够看到二者的区别)，但也基本知足了咱们的需求了。而另外一个最重要的特色就是，type="tel" 与 type="text" 相似，能够利用 onChange 对全部输入进行监听，这也就意味着咱们能够对输入的值进行控制了。

尽管这是一个投机取巧的办法，不过用在移动端上确实很是有用。下次若是遇到移动端的数字输入的状况，不妨能够考虑一下 type="tel" 这个属性。