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

时间:2024-01-20 22:01:09

手机浏览器的输入框,一直都是以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