H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法

首先，限制输入最大位数时，input有自带的属性maxlength。

<input type="text" name="email" maxlength="55" />

使用方法：maxlength="位数"

但是，对于这个属性他是有自己的限制条件的

定义和用法 maxlength 属性规定输入字段的最大长度，以字符个数计。maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

实际开发过程中，需求和理想状态是有差距的，限制位数的输入多为限制数字，比如金额，只个时候我们既要约束输入类型，同时还要限制位数。

在前辈的知道下，搭配tel属性可以实现效果，在手机上打开，激活输入框默认调用数字键盘。

<input id="money" maxlength="8" type="tel" placeholder="50000" style="color:#333" /> 元

 

更多专业前端知识，请上 【猿2048】www.mk2048.com 创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的H5 input输入限制最大位数，和调用小键盘需求发生冲突的解决办法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。