WEB网页输入框的默认键盘类型控制
参考资料 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”;
}
}
WEB网页输入框的默认键盘类型控制的更多相关文章
- WAP网页输入框的默认键盘类型控制
最近有用户反映手机网的输入框不够人性化,比如手机号.卡号输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘. 百度上对这样的资料介绍很多,基本上都和这个页面是一个意思 http://www.w ...
- 如何控制WAP网站上输入框的默认键盘类型
百度上对这样的资料介绍很多,基本上都和这个页面是一个意思 http://www.w3school.com.cn/html5/att_input_type.asp : 语法 <input type ...
- EditText ------- 键盘类型
文本输入框指定软键盘类型和软键盘回车键图标设置, 转载:http://blog.csdn.net/wirelessqa/article/details/8567327
- 控制 WAP 网站上输入框的默认类型
比如手机号,卡输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘.www . c s d n 1 2 3 . com/html/itweb/20130802/36036_36043_36004 ...
- 改变手机浏览器(iPhone/Android)上文本输入框的默认弹出键盘
iPhone/iPad和Android提供不同的的键盘输入类型,触发合适的键盘将极大地改善用户体验. 键盘类型 默认: 默认键盘的字母模式 数字: 默认键盘的数字模式,(含小数点等) 邮件: 与默 ...
- web网页练习
一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...
- WEB网页插件 如何实现 选择上传图片路径 【高级问题】
发表于 2010-10-22 12:11 | |只看楼主 按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...
- WinForm嵌入Web网页的解决方案
企业级信息化系统绝大部分采用BS架构实现,如门户网站.OA系统.电商网站等,通过浏览器输入Web网址即可访问,对于使用者来说非常便捷,对于开发维护者来说也非常方便,程序维护只需更新服务器即可,使用者无 ...
- .NET桌面程序集成Web网页开发的多种解决方案
系列目录 [已更新最新开发文章,点击查看详细] B/S架构的Web程序几乎占据了应用软件的绝大多数市场,但是C/S架构的WinForm.WPF客户端程序依然具有很实用的价值,如设计类软件 Au ...
随机推荐
- 戏说云计算之PaaS,IaaS,SaaS【转载】
最近我们聊到“CRM系统PAAS化”,有些可能就不了解,到底什么是PAAS.云计算还有IaaS,SaaS概念,这三者之间有什么区别?今天智云通CRM系统小编用通俗易懂的例子跟大家分享Paas,IaaS ...
- octet-stream
firefox突然变成了用gedit打开pdf文件, Where the link to http://download.jw.org/files/media_m...E_20150201.pdf c ...
- libevent在windows下使用步骤详解
一 环境 官方下载地址:http://libevent.org/版本:libevent-2.0.22-stable 二 编译静态库 1 解压把上面下载到libevent-2.0.22-stable.t ...
- iOS开发:后台运行以及保持程序在后台长时间运行
第一部分 1.先说说iOS 应用程序5个状态: 停止运行-应用程序已经终止,或者还未启动. 不活动-应用程序处于前台但不再接收事件(例如,用户在app处于活动时锁住了设备). 活动-app处于“使用中 ...
- 转 如何不耍流氓的做运维之——SHELL脚本
家都是文明人,尤其是做运维的,那叫一个斯文啊.怎么能耍流氓呢?赶紧看看,编写 SHELL 脚本如何能够不耍流氓. 下面的案例,我们以 MySQL 数据库备份 SHELL 脚本的案例来进行阐述. 不记录 ...
- PE文件格式详解(下)
作者:MSDN译者:李马 预定义段 一个Windows NT的应用程序典型地拥有9个预定义段,它们是.text..bss..rdata..data..rsrc..edata..idata..pdata ...
- Struts2实现国际化
public class I18nAction extends ActionSupport { private static final long serialVersionUID = -693330 ...
- linux的学习系列 8---进程管理
当我们运行程序时,Linux会为程序创建一个特殊的环境,该环境包含程序运行需要的所有资源,以保证程序能够独立运行,不受其他程序的干扰.这个特殊的环境就称为进程. 每个 Linux 命令都与系统中的程序 ...
- HDU 2579/BFS/ Dating with girls(2)
题目链接 /* 题意是是传统的迷宫加上一个条件,墙壁在k的整倍数时刻会消失,那么求到达出口的最短时间. 关键点在于某个点最多被走k次,标记vis[x][y][time%k]即可. */ #includ ...
- Hibernate Session & Transaction详解
Hibernate Session & Transaction详解 HIbernate中的Session Session是JAVA应用程序和Hibernate进行交互时使用的主要接口,它也是持 ...