针对移动设备自动大写

这项功能看起来可能最不起眼,但我认为它很重要,因为每个人都讨厌在移动设备上打字:您讨厌,我也讨厌。在 Android 版 Chrome(2015 年 4 月之前的 Chrome 43 之前的 Beta 版)中,开发者对浏览器如何帮助用户输入文本几乎没有控制权。如果您现在在设备上输入内容,界面可能如下所示:

请注意,除了 Android 识别为名称的某些值之外,所有内容均采用小写形式。

Apple 在 iOS 5 中为 HTMLInputElementHTMLTextAreaElement 引入了一个名为 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">

autocapitalize 可以采用哪些值?

下表显示了输入元素可以处于的不同状态:

关键字
<input>
<input autocapitalize=off>
不区分大小写 无 [默认]
关闭
<input autocapitalize=characters> 字符大小写 字符
<input autocapitalize=words> 字词大小写 字词
<input autocapitalize=sentences> 句子大小写 sentences

对于 HTMLInputElement,如果元素的类型为 type=text 或 type=search,则无效值默认为句子开头用大写字母。否则,默认为不使用大写字母

  • <input autocapitalize="simon"> 是一个启用了句子大小写的文本字段
  • <input type="email" autocapitalize="simon"> 将是一个文本字段,其大写形式为不区分大小写
  • <input> 将是一个文本字段,其大写形式为不区分大小写

对于 HTMLTextAreaElement,无效值默认为句子大小写。这与默认行为有所不同。

  • <textarea autocapitalize="terry"></textarea> 是一个启用了句子大小写的文本区域
  • <textarea></textarea> 是一个启用了句子大写的文本区域。
  • <textarea autocapitalize="none"></textarea> 是一个文本区域,其大小写设置为不区分大小写

对于 HTMLFormElement,我们决定不实现该属性,因为我们发现目前很少在网页上使用该属性,即使使用,也大多用于完全停用表单上的自动大写功能:

<form autocapitalize=off><input></form>

上述情况很奇怪,因为 HTMLInputElement 的默认状态为不区分大小写

为什么要使用此方法而非 inputmode

inputmode 旨在解决同一类问题(以及其他问题)。不过,它缺少浏览器实现(据我们所知,只有 Firefox OS 实现了该功能,并且带有前缀 [x-inputmode]),而且在 Web 上使用得也非常少。另一方面,autocapitalize 已在数十万个网站上的数百万个网页中使用。

我应该在什么情况下使用此功能?

这并未详尽列出应使用 autocapitalize 的所有场景;不过,在许多情况下,帮助用户输入文本会带来极大价值:

  • 如果您是以下情况,请使用 autocapitalization=words
    • 预期是人名(注意:并非所有名称都遵循此规则,但大多数西方名称会按预期自动转换为大写)
    • 公司名称
    • 地址
  • 如果您希望:
      autocapitalization=characters
    • 美国各州
    • 英国邮政编码
  • 如果您希望用户以普通段落形式输入内容(例如博文),请为输入元素使用 sentences
  • 如果您希望内容不受影响(例如输入代码),请对 TextArea 使用 none
  • 如果您不想显示提示,请勿添加 autocapitalize。