在移动HTML5页面input类型采用number无法控制长度,以及右边显示难看的加减按钮
场景:
这是之前做的移动web控件时遇到的问题。当时在我们控件的HTML5页面需要输入卡号、CV2、手机号、验证码等信息。大家都知道这些值都是数字。普通类型的输入框,当我
们点击时,手机默认掉起的键盘中只有字母和符号,而我们这里只需要输入数字,我们只有切换一下才是数字键盘。后来我们采用了number类型的输入框,虽然能吊起手机的数字
键盘,但是在有些手机上面会显示增加和减少按钮,同时有的手机还不支持比如锤子手机,最主要的是不能限制输入的长度。
立即学习“前端免费学习笔记(深入)”;
后来在我们这个控件下个版本中,我们对Html5各种类型的输入框进行了测试,终于找到了下面类型的输入框,满足我们的要求。
解决方法:
把输入框的type由number改为tel,不仅能够限制输入字符串的长度的限制,同时能够掉起手机的数字键盘,而且不会出现number类型那种难看的样式。
文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver,会用word就会使用此编辑器,在文章系统或者是新闻系统需要文字编...
H5教程
3个月前 (10-19) 124 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候,希望开发者几乎:不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
3个月前 (10-19) 125 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
3个月前 (10-19) 122 -
Canvas and Drawables 翻译第一集
android官方原文地址:http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 129 -
Canvas and Drawables 翻译第三集
Android官方原文地址:http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 127
最新文章
- 解析Python编程领域中的最佳就业趋势 3秒前
- 揭秘Python在推荐系统开发中的重要角色 41秒前
- 为何Python编程是当前最佳的就业方向? 2分钟前
- Python程序员的就业前景及发展路径 2分钟前
- 探索Python编程领域中最热门的就业选项 3分钟前
- 在Python中,for循环和while循环之间的区别是什么? 3分钟前
- 什么样的企业最需要Python开发人员? 4分钟前
- 揭示Python编程行业中具备未来潜力的就业方向 5分钟前
- 如何利用Python构建智能语音助手 5分钟前
- Python程序:输入逗号分隔的字符串 7分钟前