HTML5中input输入框在移动端的使用

移动端input的type类型

系统 IOS(10.3) Android(Vivo X6A)
email clipboard.png clipboard.png
url clipboard.png clipboard.png
number clipboard.png clipboard.png
range clipboard.png clipboard.png
date clipboard.png clipboard.png
month clipboard.png clipboard.png
week 不支持 clipboard.png
time clipboard.png clipboard.png
datetime clipboard.png clipboard.png
datetime-local clipboard.png clipboard.png
search clipboard.png clipboard.png
color 不支持 clipboard.png
tel clipboard.png clipboard.png
text clipboard.png clipboard.png

type为number时,maxlength不生效

当input输入框的type类型为number的时候,设置maxlength属性来限定输入的最大长度,发现,该属性没有正常限制最大输入长度。

<input type="number"  maxlength="6" />

上面代码中,长度可以无限输入。如果想实现最大输入长度为6,怎么解决呢?这个就要使用js来控制了。

<input type="number" oninput="if(value.length>6)value=value.slice(0,6)" />

通过给input输入框绑定oninput事件,就可以实现最大输入长度的限制了。

阅读 5.3k

推荐阅读