WEB網頁輸入框的預設鍵盤類型控制

標籤：android   blog   http   java   color   使用   

參考資料 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。後來Google到一個外國網站有講。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”;
}
}