ios端对常用input标签的渲染总结

最近在做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">

截图示例