這項功能看起來可能不怎麼吸引人,但我認為它很重要,因為每個人都不喜歡在行動裝置上輸入內容:你討厭,我也討厭。在 Android 版 Chrome (2015 年 4 月之前的 Chrome 43 以下版本) 中,開發人員幾乎無法控制瀏覽器如何協助使用者輸入文字。如果你今天在裝置上輸入內容,畫面可能會如下所示:
請注意,除了 Android 認定為名稱的部分值之外,所有內容都以小寫字母表示。
Apple 在 HTMLInputElement
和 HTMLTextAreaElement
上推出了名為 autocapitalize 的屬性 (在 iOS 5 中),可讓網頁作者提示瀏覽器應如何顯示虛擬鍵盤,以便使用者最佳化文字輸入。在最簡單的形式中,您可以指定文字方塊應自動將每個新句子的第一個字母大寫。
從 Chrome 43 開始,Chrome 將在 HTMLInputElement
和 HTMLTextAreaElement
上支援 autocapitalize 屬性,讓您控制虛擬鍵盤的自動大寫行為,並與 iOS 上的 Safari 保持一致。
autocapitalize 只會套用至 HTMLInputElement
的type 屬性設為 type="text"
、type="search"
、type="url"
、type="tel"
、type="email"
或 type="password"
。預設為「不」自動大寫。
以下是讓您在文字區域中自動將句子轉為大寫的簡單範例:
<textarea autocapitalize="sentences">
自動大寫功能可接受哪些值?
下表列出輸入元素可能處於的不同狀態:
州 | 關鍵字 | |
---|---|---|
<input> <input autocapitalize=off>
|
不區分大小寫 | 無 [預設] |
關閉 | ||
<input autocapitalize=characters> |
字元大寫 | 字元 |
<input autocapitalize=words> |
字詞大寫 | 字詞 |
<input autocapitalize=sentences> |
句子大寫 | 語句 |
對於 HTMLInputElement
,如果元素的類型為 type=text
或 type=search
,則無效值預設為「句首大寫」。否則,則為「不大寫」。
<input autocapitalize="simon">
會是含有句子大小寫的文字欄位<input type="email" autocapitalize="simon">
是使用「不區分大小寫」的文字欄位。<input>
是使用「不區分大小寫」的文字欄位。
對於 HTMLTextAreaElement
,無效值預設為「Sentences Capitalization」。這與預設行為不同。
<textarea autocapitalize="terry"></textarea>
會是文字區域,並啟用句子大小寫<textarea></textarea>
是使用「句首大寫」的文字區域。<textarea autocapitalize="none"></textarea>
是使用「不區分大小寫」的文字區域。
我們決定不為 HTMLFormElement
實作屬性,因為我們發現這項屬性在目前的網頁上很少使用,而且在使用時,大多是用來完全停用表單的自動大寫功能:
<form autocapitalize=off><input></form>
上述情況很奇怪,因為 HTMLInputElement
的預設狀態為「不區分大小寫」。
為什麼要使用這個而非 inputmode
?
inputmode
旨在解決同類問題,以及其他問題。不過,這項功能缺乏瀏覽器實作方式,據我們所知,只有 Firefox OS 有實作方式,且前置字串為 (x-inputmode),但在網路上也幾乎沒有人使用。另一方面,autocapitalize
已用於數百萬個網站上數十萬個網頁。
何時該使用?
以下並非完整的 autocapitalize
使用時機清單,但在許多情況下,協助使用者輸入文字可帶來極大價值:
- 如果您是
- 預期使用者姓名 (注意:並非所有名稱都遵循此規則,但大多數西方名稱會自動大寫)
- 公司名稱
- 地址
autocapitalization=words
- 如果您預期:
- 美國各州
- 英國郵遞區號
autocapitalization=characters
- 如果您希望使用者輸入一般段落形式的內容 (例如網誌文章),請在輸入元素中使用
sentences
。 - 如果您預期內容不會受到影響 (例如輸入程式碼),請在 TextAreas 上使用
none
。 - 如果不想加入提示,請不要加入自動大寫功能。