手机端访问web调用数字键盘。
转自 http://www.webkfa.com/one4/w1937.html
最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案,最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。
type="tel" 和 type="number" 的区别
这里还是先那么先交代一下最初遇到的问题。其实无论是tel
还是number
都不是完美的:
type="tel"
优点是iOS和Android的键盘表现都差不多
缺点是那些字母好多余,虽然我没有强迫症但还是感觉怪怪的啊。
type="number"
优点是Android下实现的一个真正的数字键盘
缺点一:iOS下不是九宫格键盘,输入不方便
缺点二:旧版Android(包括微信所用的X5内核)在输入框后面会有超级鸡肋的小尾巴,好在Android 4.4.4以后给去掉了。
不过对于缺点二,我们可以用webkit私有的伪元素给fix掉:
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
pattern属性
pattern
用于验证表单输入的内容,通常HTML5的type
属性,比如email
、tel
、number
、data
类、url
等,已经自带了简单的数据格式验证功能了,加上pattern后,前端部分的验证更加简单高效了。
显而易见,pattern
的属性值要用正则表达式。
实例
简单的数字验证
数字的验证有两个:
<input type="number" pattern="\d">
<input type="number" pattern="[0-9]*">
对表单验证来说,这两个正则的作用是一样的,表现的话差异就很大:
iOS中,只有
[0-9]\*
才可以调起九宫格数字键盘,\d
无效Android 4.4以下(包括X5内核),两者都调起数字键盘;
Android 4.4.4以上,只认
type
属性,也就是说,如果上面的代码将type="number"
改为type="text"
,将调起全键盘而不会是九宫格数字键盘。
常用的正则表达式
pattern
的用法都一样,这里不再啰嗦各种详细写法了,只是列出来一些常用的正则就好了:
信用卡
[0-9]{13,16}
银联卡
^62[0-5]\d{13,16}$
Visa:
^4[0-9]{12}(?:[0-9]{3})?$
万事达:
^5[1-5][0-9]{14}$
QQ号码:
[1-9][0-9]{4,14}
手机号码:
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份证:
^([0-9]){7,18}(x|X)?$
密码:
^[a-zA-Z]\w{5,17}$
字母开头,长度在6~18之间,只能包含字母、数字和下划线强密码:
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间7个汉字或14个字符:
^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
浏览器支持
很不幸,pattern的浏览器支持很惨:
但是如果只是如文章开头提到的改数字键盘的话,iOS和Android都是没有问题的。
手机端访问web调用数字键盘。的更多相关文章
- TP3.2.x判断手机端访问并设置默认访问模块的方法 - ThinkPHP框架
手机端访问时调用Wap手机模块,实现在手机端访问时展示出手机网站,无需跳转域名首先我们在./Application/Common/Conf/ 目录下建立两个公共配置文件:config.php 和con ...
- ThinkPHP3.2判断手机端访问并设置默认访问模块的方法
ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...
- 七牛用户如何将视频转码成普清高清来适应不同的手机端或者web端
Qiniu 七牛问题解答 非常多人会用到七牛视频转码问题,要将视频转码成适用于各种终端的视频,也有的用户对转码服务的码率,帧率,分辨率等理解不多.不知道该怎样设置这些參数.以下我给大家科普一下. 问题 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问
关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器 ...
- js判断是否为手机端访问
随着移动端越来越重要,pc和移动端网站后台系统可能是同一个,登录或者某个特定时期需要根据不同访问来源,跳转不同页面或者做不同的处理: 这时我们就需要js的 navigator 对象: 我们先了解一下n ...
- JavaScript 判断手机端访问并跳转 redirect mobile
假如你的手机端网站在 /m 目录下 (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer| ...
- 手机端网页web开发要点
1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- PHP 判断是否为手机端访问
/* * 判断是否为手机端 */function check_wap(){ // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_W ...
随机推荐
- 在Ubuntu下搭建Spark群集
在前一篇文章中,我们已经搭建好了Hadoop的群集,接下来,我们就是需要基于这个Hadoop群集,搭建Spark的群集.由于前面已经做了大量的工作,所以接下来搭建Spark会简单很多. 首先打开三个虚 ...
- 跟着老男孩教育学Python开发【第二篇】:Python基本数据类型
运算符 设定:a=10,b=20 . 算数运算 2.比较运算 3.赋值运算 4.逻辑运算 5.成员运算 基本数据类型 1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**3 ...
- (转载) Linux IO模式及 select、poll、epoll详解
注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出. 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案 ...
- 技术笔记:Indy的TIdSMTP改造,解决发送Html和主题截断问题
使用Indy来发邮件坑不少啊,只不过有比没有好吧,使用delphi6这种老工具没办法,只能使用了新一点的Indy版本9,公司限制... 1.邮件包含TIdText和TIdAttachment时会出现T ...
- 开始mono开发
使用mono框架开发android程序,第一步当然是构建开发环境,严格意义上说是使用 mono for android开发android程序. 参考Mono for Android安装配置破解 mo ...
- .NET开源进行时:消除误解、努力前行(本文首发于《程序员》2015第10A期的原始版本)
2014年11月12日,ASP.NET之父.微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣布,微软将开源全部.NET核心运行时,并将.NET ...
- AngularJS 第四天----控制器
控制器的作用 今天和大家学习AngularJS中控制器方面的知识,本文会给出一些例子来说明如何使用AngularJS的控制器.在开始我们的例子之前,首先说说AngularJS控制器的作用.简单的来说A ...
- 抛弃jQuery:Why?
原文链接:http://blog.garstasio.com/you-dont-need-jquery/ 我的Blog:http://cabbit.me/you-dont-need-jquery/wh ...
- Integer.parseInt 引发的血案
Integer.parseInt 处理一个空字符串, 结果出错了, 程序没有注意到,搞了很久, 引发了血案啊!! 最后,终于 观察到了, 最后的部分: Caused by: java.lang.NoC ...
- 特殊的数据类型: bit、sql_variant、sysname
在SQL Server中,特殊的数据类型主要有三个,分别是:bit.sql_variant 和 sysname 一,bit bit类型,只有三个有效值:0,1 和 null,字符串true或false ...