觸摸手機上 input 中的學問

在觸摸手機上，能夠有虛擬鍵盤，自動識別不一樣的輸入框類型。

若是設置恰當的 type 屬性，極大的方便了用戶的輸入。

常見類型（HTML5）：http://www.w3school.com.cn/html5/att_input_type.asp

值	描述
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 的文本字段。

固然了，輸入法也要具有這種智能檢測能力，下面是谷歌拼音輸入法截屏（百度輸入法不行），Android 4.4 系統下。

type 爲空，type="text"

type="tel"

type="url"（原來是中文狀態，自動切換到英文狀態，鍵盤上多出了斜線「/」）

type="search"

type="time" （datetime, datetime-local, month, week 相似）

type="color"

手機測試請輸入上面網址（http://itstar.net/article/input.htm）或者掃描下面二維碼：