h5页面做一个搜索功能，且只支持数字[0-9]输入。本来觉得so easy，结果笑容逐渐消失。
一、input type=number
<input type="number" v-model="val">
问题接踵而来:
1、maxlength属性失效，需要针对输入 @input 处理
<input type="number" v-model="val" @input="inputVal">// jsinputVal (e) {this.val = e.target.value.slice(0, this.maxlength)}
2、+-.eE这几个和浮点数相关的值，可以输入（其中e/E是科学计数法的关键字，1e2= 1 * 10 ^ 2。这里的问题是多方面的：
文本框展示的值，与实际的value值差异明显。输入后可能无法删除。按我们的搜索需求，这几个值不应该支持输入
举例：
1）小数点。如输入13.14时，结果如下图。其中：13和13.，value都是13。
2）+-eE。如输入+-e，结果如下图。value是空字符串('')。且无法清空。
so，针对这几个特殊字符，其中的一个思路就是限制输入。
1）监听keypress/keydown事件，不满足输入时，阻止事件的默认行为。
<input type="number" v-model="val" @input="inputVal" @keypress="keypressVal">keypressVal (e) {let {key} = e;// 方式一：e.returnValue = /[0-9Backspace]/.test(key)// 方式二：// if (/[^0-9Backspace]/.test(key)) {// e.preventDefault()// }}
在浏览器上测试，除了e，别的都输入不了（实际是输入法是英文的，除了e都输入不了；但中文输入法，这几个字符都能输入）。到Android机上测试，结果是这几个字符均可正常输入，就像这几行代码没加一样。ios已经不想测试了，心real累了。
2）input支持pattern属性，继续尝试
<input type="number" v-model="val" @input="inputVal" pattern="[0-9]*"><input type="number" v-model="val" @input="inputVal" pattern="\d">
到Android机上测试，只是唤起了数字键盘，不耽误输入+-.eE。
至此，type=number 的方式被彻底放弃。
二：input type=tel
<input type="tel" v-model="tel" maxlength="5">
默认唤起数字键盘，支持maxlength，且支持所有的字符。类似默认唤起数字键盘type=text 的文本框。按我们的需求，输入为非数字时，可替换为空字符。
<input type="tel" maxlength="5" @input="inputNumeric" v-model="numeric">inputNumeric (e) {this.numeric = e.target.value.replace(/\D/, '')}
此方式基本满足需求。作为公共组件的话，还得花时间完善一下代码。
三：手写一个数字键盘
如果个人有能力，且愿意实践，手写一个数字键盘，也不失为一个方法。只是代价有点大，本人手动忽略（如果项目有特殊要求除外）。如果要站在巨人肩膀上，vant提供了数字键盘。
四：成熟的组件库 Vant-Field 输入框
// Vue 2 项目，安装 Vant 2npm i vant@latest-v2 -S// 手动按需引入组件import Vue from 'vue'import { Field } from 'vant'import 'vant/lib/field/style'Vue.use(Field)<!-- 允许输入正整数，调起纯数字键盘 --><van-field v-model="digit" type="digit"/>
亲测好用，且提供了多种类型的输入框。咳，走了那么多弯路，最后得来全不费功夫。
源码：
type="digit"： <input type=tel inputmode=numeric>，且对输入值value做了处理（过滤小数点、负号，只支持纯数字）。
还得是input type=tel，是本文二(二：input type=tel) 的高阶版。其中，inputmode并不是常用属性，需要学习，详见下文。
五：总结
h5页面做一个搜索功能，且只支持数字[0-9]输入。首先，最简单的方式是使用成熟组件库（可使用Vant 的Field 输入框）。其次是使用input type=tel，非数字的输入需处理成空字符串。最复杂的处理方式是定制一个数字键盘，甚至其中的数字可以是乱序的(某些银行app的数字键盘)。
六：补充说明
MDN inputmode：控制键盘的展示形式。可能的值：
none：不使用系统提供键盘。用于页面有自定义键盘的情况。text：本地标准键盘。numeric：数字键盘。数字键，可能还包含减号。decimal：数字键盘。数字键和十进制的分隔符(.或,)。tel：数字键盘。数字键、星号(*)、井号(#)。search：用于搜索。回车/提交键盘可能显示成 search 或 搜索。url：用于输入URLs。键盘上有 / 符号。email：用于输入邮件地址。键盘上有@符号。
首先，tel、search、url、email 这四个值。
需要tel键盘时，一般使用<input type="tel">，而不是inputmode=tel。需要搜索键盘时，一般使用<input type="search">，而不是inputmode=search。需要输入URLs时，一般使用<input type="url">，而不是inputmode=url。需要输入邮件地址时，一般使用<input type="email ">，而不是inputmode=email 。
其次，对于数字键盘，ios和Android，UI差异还是比较明显的。并不影响使用，注意功能的实现即可。
The end.
