最近在做 ios 端的 number 数字键盘时的一些总结。随着浏览器对 HTML5 的进一步标准化施行,其实原生的组件能实现的性能越来越多,有时候咱们能够不必第三方的组件库,就能实现很难看的前端交互组件。
这篇文章提到的 input 标签的 type 类型
<input type="password">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="month">
<!-- 这里 ios 的体现是,弹出的键盘顶部会有数字按钮,然而底部还是会有字符按钮,以及字母键盘的切换。input 输入框里仍然能够输出字符,android 端是不容许输出字符的,只能数字。(具体可看上面大图)-->
<input type="number">
<!-- 这里 ios 的体现是,只会有纯数字的按钮呈现,并且是九宫格的模式,然而不能够再切回原始键盘了。(具体可看上面大图)-->
<input type="number" pattern="\d*"/>
<!-- 这里 ios 的体现是,会有纯数字的按钮呈现,并且是九宫格的模式,还能够切换到加号、星号、井号三个特殊字符。-->
<input type="tel">
<input type="range" min="0" max="50">
<input type="time">
<input type="url">
截图示例