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 控件）
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

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