注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

isblog主页

或许不一定要做得最多,但一定要做得最好! 能力就是一种财富,积累越多,就越体现你

 
 
 

日志

 
 

WAP网页输入框的默认键盘类型控制  

2014-06-20 10:05:26|  分类: Html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:http://www.cnblogs.com/txw1958/p/wap-keyboard.html


最近有用户反映手机网的输入框不够人性化,比如手机号、卡号输入框应该默认显示数字键盘,邮箱输入框应该默认显示邮箱键盘。

百度上对这样的资料介绍很多,基本上都和这个页面是一个意思 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 控件)
email 定义用于 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

iPhone text keyboard

Your standard text input field code will look something like this:

<input type="text"></input>

Telephone keyboard

iPhone tel keyboard

In order to display the telephone keyboard, use this:

<input type="tel"></input>

URL keyboard

iPhone web keyboard

For URLs you want this:

<input type="url"></input>

Email keyboard

iPhone email keyboard

For email addresses, you want this:

<input type="email"></input>

Numerical keyboard

iPhone 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”;
}
}


  评论这张
 
阅读(410)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018