如何控制WAP网站上输入框的默认键盘类型
百度上对这样的资料介绍很多,基本上都和这个页面是一个意思 http://www.w3school.com.cn/html5/att_input_type.asp :
语法
<input type="value">
属性值
| 值 | 描述 |
|---|---|
| button | 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) |
| checkbox | 定义复选框。 |
| color | 定义拾色器。 |
| date | 定义日期字段(带有 calendar 控件) |
| datetime | 定义日期字段(带有 calendar 和 time 控件) |
| datetime-local | 定义日期字段(带有 calendar 和 time 控件) |
| month | 定义日期字段的月(带有 calendar 控件) |
| week | 定义日期字段的周(带有 calendar 控件) |
| time | 定义日期字段的时、分、秒(带有 time 控件) |
| 定义用于 e-mail 地址的文本字段 | |
| file | 定义输入字段和 “浏览…” 按钮,供文件上传 |
| hidden | 定义隐藏输入字段 |
| image | 定义图像作为提交按钮 |
| number | 定义带有 spinner 控件的数字字段 |
| password | 定义密码字段。字段中的字符会被遮蔽。 |
| radio | 定义单选按钮。 |
| range | 定义带有 slider 控件的数字字段。 |
| reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
| search | 定义用于搜索的文本字段。 |
| submit | 定义提交按钮。提交按钮向服务器发送数据。 |
| tel | 定义用于电话号码的文本字段。 |
| text | 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。 |
| url | 定义用于 URL 的文本字段。 |
但是不能满足我的需求,在安卓下正常,但是在iPhone下就不行了。比如如果是卡号的话,按照这里所说,应该用type=”number”,但是我们卡号是0打头,这种情况下会输入框失去焦点时,自动删除开头的0。后来谷歌到一个外国网站有讲。http://sja.co.uk/2012/1/4/controlling-which-ios-keyboard-is-shown
Controlling which iOS keyboard is shown →
Note: This is a minor update to a post I made last year, migrated from a previous blog.
One of my pet hates (there are many), is being presented with the incorrect keyboard, or having auto capitalisation forced upon me, when entering information into web forms on my iPhone or iPad. This is something that’s very easy to control and can be done
so with a little sprinkle of HTML5. You don’t even have to worry about old browsers – I’ve tested this to work perfectly well even in IE6.
The screenshots used in this post are from a UK based iPhone 4S running iOS5; previous versions of iPhone OS and the iPad will differ.
Text keyboard

Your standard text input field code will look something like this:
<input type="text"></input> Telephone keyboard

In order to display the telephone keyboard, use this:
<input type="tel"></input> URL keyboard

For URLs you want this:
<input type="url"></input> Email keyboard

For email addresses, you want this:
<input type="email"></input> Numerical keyboard

And finally, for a simple numerical keyboard (similar to the telephone one but with no +, * and # key):
<input type="text" pattern="[0-9]*"></input> Other options
It’s also possible to control auto correct with the use of the following paramater:
autocorrect="off" Last, but by no means least, turning on or off auto capitalisation:
autocapitalize="off" So the next time you’re creating a login field that takes an email address, use something like this:
<input type="email" autocorrect="off" autocapitalize="off"></input> 至于在安卓和苹果上的区分,可以采用php来判断用户当前的操作系统,然后分别给出不一样的输入框,函数如下:
//判断用户的客户端类型
function clientType(){
if(stristr($_SERVER['HTTP_USER_AGENT'],’Android’)) {
return “android”;
}else if(stristr($_SERVER['HTTP_USER_AGENT'],’iPhone’)){
return “ios”;
}else{
return “other”;
}
}
如何控制WAP网站上输入框的默认键盘类型的更多相关文章
- 控制 WAP 网站上输入框的默认类型
比如手机号,卡输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘.www . c s d n 1 2 3 . com/html/itweb/20130802/36036_36043_36004 ...
- WAP网页输入框的默认键盘类型控制
最近有用户反映手机网的输入框不够人性化,比如手机号.卡号输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘. 百度上对这样的资料介绍很多,基本上都和这个页面是一个意思 http://www.w ...
- WEB网页输入框的默认键盘类型控制
参考资料 http://www.w3school.com.cn/html5/att_input_type.asp : 语法 <input type="value"> 属 ...
- 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘
iPhone/iPad和Android提供不同的的键盘输入类型,触发合适的键盘将极大地改善用户体验. 键盘类型 默认: 默认键盘的字母模式 数字: 默认键盘的数字模式,(含小数点等) 邮件: 与默 ...
- IIS7.5 在已有的WEB网站上配置FTP发布
IIS7.5 有了很多新特性,例如FashCGI,Rewrite 模块的内置,简易的FTP发布等等,但是即使是微软,也没有详细的文档,本文详细的介绍了如何在现有的WEB网站上建立FTP发布. IIS ...
- 手机wap网站建设的方法和技巧
随着互联网技术的不断进步,越来越多的运营商对于手机wap网站的建设有了更多的投入,手机wap网站的建设和开发要根据网站的特点和经营范围来进行设计和建设,这样才可以提升手机wap网站建设的效果.现在智能 ...
- wap网站的优化建设
我们在成功建立wap网站之后,不要觉得一时没有达到自己想要的效果就丢之气之,让其成为垃圾链接,我们既然前期做了大量的工作来建立起来这个网站,一定要坚持耐心的把这个网站培养下去,其实就如同我们栽种一个树 ...
- WAP网站的推广方式(自整合篇)
WAP网站推广随着无线互联时代的到来,已经日益受到大家的重视.虽然WAP网站的目前盈利模式还不是很清晰,但WAP网站推广的竞争强度将肯定会越来越激烈,下面和大家一起探讨下WAP网站的推广方法. 方法/ ...
- 如何直接在github网站上更新你fork的repo?
玩过github的人一定会在你自己的账号上fork了一些github开源项目.这些开源项目往往更新比较活跃,你今天fork用到你自己的项目中去了,过几个星期这个fork的origin可能有一些bugf ...
随机推荐
- js课程 2-7 for-in循环怎么使用
js课程 2-7 for-in循环怎么使用 一.总结 一句话总结:用的是in的作用加上for的作用,相当于一个组合技. 1.js中in运算符的作用是什么? 判断一个元素是否在一个集合或者对象中 1.a ...
- matplotlib学习之函数积分图
# coding:utf-8 import numpy as np from matplotlib import pyplot as plt from matplotlib.patches impor ...
- POJ 1562 Oil Deposits (HDU 1241 ZOJ 1562) DFS
现在,又可以和她没心没肺的开着玩笑,感觉真好. 思念,是一种后知后觉的痛. 她说,今后做好朋友吧,说这句话的时候都没感觉.. 我想我该恨我自己,肆无忌惮的把她带进我的梦,当成了梦的主角. 梦醒之后总是 ...
- Notepad++打开xml文件显示crlf的问题
如图所示,显示CRLF, CRLF其实是换行符. 所以在下图所示设置下显示行尾符不显示即可.
- 使用oschina的gitserver
1.概要 事实上oschina的gitserver与github的几乎相同.只是既然是中国的gitserver,那么速度应该更快一些吧 2.注冊 链接https://git.oschina.net/, ...
- php函数实现显示几秒前,几分钟前,几天前等方法(网络上什么都有)
php函数实现显示几秒前,几分钟前,几天前等方法(网络上什么都有) 一.总结 网络上面什么函数都有 二.php函数实现显示几秒前,几分钟前,几天前等方法 现在很多网站的时间显示都很人性化,不再是单纯的 ...
- 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——(3)输入输出函数
一.基本的输入和输出函数的用法 1.printf() //屏幕输出 用法: (1)printf("字符串\n"); (2)printf("输出控制符", 输出 ...
- [Postgres] Group and Aggregate Data in Postgres
How can we see a histogram of movies on IMDB with a particular rating? Or how much movies grossed at ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- STS开发环境搭建与配置
STS开发环境搭建与配置 (2012-04-11 07:24:51) 转载▼ 1. 环境准备 安装JDK.MAVEN 1.1. 下载 下载sprdfingsource-tool-su ...