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

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:

Telephone keyboard

In order to display the telephone keyboard, use this:

URL keyboard

For URLs you want this:

Email keyboard

For email addresses, you want this:

Numerical keyboard

And finally, for a simple numerical keyboard (similar to the telephone one but with no +, * and # key):

Other options

It’s also possible to control auto correct with the use of the following paramater:

Last, but by no means least, turning on or off auto capitalisation:

So the next time you’re creating a login field that takes an email address, use something like this:

至于在安卓和苹果上的区分，可以采用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”;
}
}