[Mobile] 手机浏览器输入框-数字输入框

手机浏览器的输入框，一直都是以web的方式进行开发的，没有关注到用户体验，领导提出了输入框要弹出数字输入框，想来应该有这种技术能实现。

 

搜索之后发现可以使用type=”number”实现，此方法在andriod和ios下均能实现效果，以下为使用之后遇到的问题：

1. 使用type=”number”的问题，使用之后无法对输入的长度做控制，以前使用text，可以使用maxlength属性进行长度输入的控制，而变成number之后无法控制，虽然可以设置min和max，但这两个值只是设置输入框的长度最大为多少，而实际输入多长没有限制，因为我们输入的卡号长度是需要控制的

2. 纯数字密码无法解决，如果设置为number，意味着数字会显示出来，而密码框的遮罩效果无法实现，搜索之后没有找到现成的解决方案

构想最后解决办法：

1. 可以使用这个属性，但是需要使用js对输入长度进行控制

2. 后端对提交数据进行校验，并返回告诉用户失败原因

3. 如果对数字输入长度不限制的，可以直接忽略此问题

 

参考资料：

http://blog.csdn.net/monkey_cool/article/details/18733513

http://www.cnblogs.com/txw1958/p/wap-keyboard.html

http://www.w3school.com.cn/html5/att_input_type.asp

转载于:https://www.cnblogs.com/garinzhang/p/mobile_input_number.html