看來這看似最令人驚豔的特徵,但我認為這點很重要,因為每個人都會在行動裝置上打字:你討厭,但我不喜歡。Chrome for Android (Chrome 43 以下版本 - 自 2015 年 4 月起推出 Beta 版),開發人員無法控管瀏覽器協助使用者輸入文字的方式。你今天要透過裝置輸入文字,畫面可能會如下所示:
請注意,所有 Android 辨識出的值都是小寫,而有些值是小寫。
Apple 在 HTMLInputElement
和 HTMLTextAreaElement
上導入了 iOS 5 中名為「autocapitalize」(自動大寫) 的屬性,可讓網頁作者提示瀏覽器如何向使用者顯示虛擬鍵盤,為使用者提供最理想的文字輸入體驗。在最簡單的形式中,您可以指出文字方塊應自動大寫,每個新句子的第一個字母。
自 Chrome 43 版起,Chrome 將針對 HTMLInputElement
和 HTMLTextAreaElement
支援 autocapitalize 屬性,可讓您控制虛擬鍵盤的自動大寫行為,並將其內嵌於 iOS 的 Safari 中。
autocapitalize 只會套用至 type 屬性設為 type="text"
、type="search"
、type="url"
、type="tel"
、type="email"
或 type="password"
的 HTMLInputElement
。預設值為「不」自動大寫。
以下提供一個簡單的範例,讓您自動大寫文字區域中的句子:
<textarea autocapitalize="sentences">
系統可以自動設定哪些值?
下表顯示輸入元素可能處於的不同狀態:
狀態 | 關鍵字 | |
---|---|---|
<input> <input autocapitalize=off>
|
無大寫字母 | 無 [預設] |
關閉 | ||
<input autocapitalize=characters> |
字元大寫 | 字元 |
<input autocapitalize=words> |
字詞大寫 | 字詞 |
<input autocapitalize=sentences> |
句首字母大寫 | 語句 |
對於 HTMLInputElement
而言,如果元素類型為 type=text
或 type=search
,無效值會預設為「Sentences Capitalization」;否則為「無大寫」。
<input autocapitalize="simon">
將是含有 Sentences Capitalization 的文字欄位<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
。 - 如果您不想提供提示,請不要新增自動大寫設定。