使用 HTML5 input 型別提升移動端輸入體驗（鍵盤）

標籤：

在最近的項目中，策劃老是要求我們彈出各種類型的鍵盤，特別是在iOS下，例如輸入帳號的時候，不應該支援輸入中文，該輸入純數位時候就應該談數字鍵台等。
個人覺得這些都是我們平時開發很少意識到的，雖然有些刁鑽，但都是為了使用者體驗，為了我們的產品，於是便在網上找了一些資料，在此與各位朋友分享：

在過去的幾年裡，在行動裝置上瀏覽網頁已變得難以置信的受歡迎。 但是這些裝置上的瀏覽體驗，有時遺留很多的有待改進。當涉及到填寫表單時，這一點尤為明顯。幸運的是，HTML5規範引入了許多新input類型，使得在行動裝置上，使用者更容易填寫的你的網頁表單。
這是一個相當棒的進展，行動瀏覽器廠商拿起新的HTML5 input類型，並使用它們來顯示定製過的鍵盤配置，使使用者更容易輸入資料。 
在本文中，你將學到8種已經在HTML5中引入的新input類型。
注意: 本文中，iOS的螢幕使用iPhone5和Safari截取。 Android螢幕則是在虛擬設備上運行Android4.1和其備有的網頁瀏覽器截取。

電子郵件input類型

 

IOS（左）和Android（右）的電子郵件input的鍵盤
email 類型，iOS和Android瀏覽器都顯示了輕度定製過的鍵盤。注意縮短的空格鍵的存在和iOS鍵盤的最底一行加入了@ 和句號（.）鍵。 而在Android上，標準逗號鍵將出現在空格鍵的左邊，已經被一個@鍵替換。
<input type="email" name="email">

URL input 類型

 

iOS的URL input鍵盤
url  input 類型可以用來協助使用者輸入網址。在iOS上，所有的空格鍵已被替換成句號（.）鍵和正斜杠（/）鍵，以及一個特殊的.com鍵。 
我的測試顯示，Android鍵盤沒有變化。
<input type="url" name="url">

電話號碼input類型

 

IOS（左）和Android（右）的電話input的鍵盤
使用 tel input 類型時，iOS和Android都是提示顯示鍵盤，而不是標準鍵盤。
<input type="tel" name="tel"> 數字input類型

 

 IOS（左）和Android（右）的數字input的鍵盤 
number input 類型促使iOS顯示數字和標點符號的鍵盤。Android瀏覽器將啟動一個類似顯示電話輸入的鍵盤。
<input type="number" name="number">

日期input類型

 

 iOS日期拾取器
對於日期和時間，也有許多input類型可用。由於他們保證了你的資料是以一個標準的格式提供，所以這些可以是非常有用的。
在iOS上的 date input 類型會提示顯示一個日期選取器。不幸的是，Android瀏覽器還未支援任何datetime 的input類型。
<input type="date" name="date">

時間input類型

 

 iOS時間拾取器
使用time類型時會提示iOS顯示一個簡單的拾取器來選擇小時和分鐘。
<input type="time" name="time">

日期和時間input類型

 

iOS日期時間拾取器
使用datetime類型時將顯示一個用於同時選擇日期和時間的拾取器。
雖然沒有顯式的選擇年的選項，但是拾取器會自動根據您選擇的日期和月份將年添加到你的input。
<input type="datetime" name="datetime">

月份input類型

 

 iOS 月份拾取器
month 類型時將會顯示日期選取器的簡化版本。
HTML規範還定義了一個week的input類型，然而，在我測試過的瀏覽器上，這好像並沒有實現。
<input type="month" name="month">

HTML5的input類型的瀏覽器安全色性
不支援這些新input類型的瀏覽器將只給使用者顯示一個簡單的文本input。 這意味著，你可以繼續前進，今天開始使用這些新的輸入類型吧！
在案頭瀏覽器中，能支援日期/時間的input類型的瀏覽器仍非常有限。Opera瀏覽器目前有著最好的實現，支援本篇文章中所有提到的類型。Google的Chrome瀏覽器支援 date 類型，但現在沒有其他東西。Safari瀏覽器有日期格式的文字欄位，但不支援像Opera和Chrome上顯示的那樣的日曆小工具。

幸運的是，曾經忍受一個差體驗的瀏覽器的日子，在移動端已很快不再。利用HTML5引入的移動端友好的新特性的好處， 對我們所有的使用者而言，都肯定能夠享受愉快的體驗，無論他們是使用哪種裝置。

 

有用的連結

 

 

瀏覽器支援日期/時間input

 

網頁超文本應用技術工作小組HTML5規範:input類型

 

 

本文轉載自：http://www.oschina.net/translate/using-html5-input-types-to-enhance-the-mobile-browsing-experience?cmp

使用 HTML5 input 型別提升移動端輸入體驗（鍵盤）