在移动HTML5页面input类型采用number无法控制长度,以及右边显示难看的加减按钮
2015-08-02 20:40
423 查看
场景:
这是之前做的移动web控件时遇到的问题。当时在我们控件的html5页面需要输入卡号、CV2、手机号、验证码等信息。大家都知道这些值都是数字。普通类型的输入框,当我
们点击时,手机默认掉起的键盘中只有字母和符号,而我们这里只需要输入数字,我们只有切换一下才是数字键盘。后来我们采用了number类型的输入框,虽然能吊起手机的数字
键盘,但是在有些手机上面会显示增加和减少按钮,同时有的手机还不支持比如锤子手机,最主要的是不能限制输入的长度。
后来在我们这个控件下个版本中,我们对HTML5各种类型的输入框进行了测试,终于找到了下面类型的输入框,满足我们的要求。
解决方法:
把输入框的type由number改为tel,不仅能够限制输入字符串的长度的限制,同时能够掉起手机的数字键盘,而且不会出现number类型那种难看的样式。
这是之前做的移动web控件时遇到的问题。当时在我们控件的html5页面需要输入卡号、CV2、手机号、验证码等信息。大家都知道这些值都是数字。普通类型的输入框,当我
们点击时,手机默认掉起的键盘中只有字母和符号,而我们这里只需要输入数字,我们只有切换一下才是数字键盘。后来我们采用了number类型的输入框,虽然能吊起手机的数字
键盘,但是在有些手机上面会显示增加和减少按钮,同时有的手机还不支持比如锤子手机,最主要的是不能限制输入的长度。
后来在我们这个控件下个版本中,我们对HTML5各种类型的输入框进行了测试,终于找到了下面类型的输入框,满足我们的要求。
解决方法:
把输入框的type由number改为tel,不仅能够限制输入字符串的长度的限制,同时能够掉起手机的数字键盘,而且不会出现number类型那种难看的样式。
相关文章推荐
- 如何让浏览器支持HTML5标签
- HTML5文件API
- 3、H5+初始化
- HTML5
- html5+css3 快速学习
- HTML5 Boilerplate
- HTML5头部标签备忘
- 【阅读】《head first html5》第九章——在本地存储
- Java EE HTML5 WebSocket 示例
- 【实例】html5中使用localStorage实现简易的便利贴网页
- HTML5实现屏幕手势解锁(转载)
- 用H5的canvas做时钟
- HTML5 – 4.canvas
- HTML5 – 3.加强版ol
- 【学习笔记】HTML5视频的属性、方法、事件介绍 详解
- 利用HTML5分片上传超大文件
- HTML4 和 HTML5 的10个关键区别
- 20150720 html5语法、标签、属性
- HTML5/CSS3滑块动画菜单
- 基于HTML5手机登录注册表单代码