在行動裝置上自動使用大寫

看來這看似最令人驚豔的特徵,但我認為這點很重要,因為每個人都會在行動裝置上打字:你討厭,但我不喜歡。Chrome for Android (Chrome 43 以下版本 - 自 2015 年 4 月起推出 Beta 版),開發人員無法控管瀏覽器協助使用者輸入文字的方式。你今天要透過裝置輸入文字,畫面可能會如下所示:

請注意,所有 Android 辨識出的值都是小寫,而有些值是小寫。

Apple 在 HTMLInputElementHTMLTextAreaElement 上導入了 iOS 5 中名為「autocapitalize」(自動大寫) 的屬性,可讓網頁作者提示瀏覽器如何向使用者顯示虛擬鍵盤,為使用者提供最理想的文字輸入體驗。在最簡單的形式中,您可以指出文字方塊應自動大寫,每個新句子的第一個字母。

自 Chrome 43 版起,Chrome 將針對 HTMLInputElementHTMLTextAreaElement 支援 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
  • 如果您不想提供提示,請不要新增自動大寫設定。