针对移动设备自动大写

这可能看起来是当前最令人印象深刻的功能,但我认为它很重要,因为每个人都不喜欢在移动设备上打字:您讨厌它,我讨厌它。在 Chrome(Android 版之前的 Chrome 43 - 测试版于 2015 年 4 月发布)中,开发者几乎无法控制浏览器如何帮助用户输入文本。如果您今天在设备上输入,界面可能如下所示:

请注意,除了 Android 识别出的一些值外,所有内容均采用小写形式。

Apple 在 HTMLInputElementHTMLTextAreaElement 上引入了一个名为“自动大写”的属性,在 iOS 5 中,它允许网页作者提示浏览器应如何向用户显示虚拟键盘,从而为用户优化文本输入。用最简单的方式,您可以指示文本框应自动将每个新句子的首字母大写。

从 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> 句首字母大写 sentences

对于 HTMLInputElement,如果元素的类型为 type=text 或 type=search,则无效默认值为 Sentences Capitalization,否则为 No Capitalization

  • <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 的默认状态为 No Capitalization

您为何在 inputmode 的基础上使用该产品?

inputmode 旨在解决同一类型的问题等。不过,它一直缺少浏览器实现。据我们所知,只有 Firefox 操作系统具有实现,并且它带有前缀 (x-inputmode),但它在 Web 上的使用非常少。另一方面,autocapitalize 已应用于数十万个网站上的数百万个网页。

我应该在什么情况下使用它?

这里并未详尽列出应在何时使用 autocapitalize;不过,在很多情况下,帮助用户输入文本可以带来很大的价值:

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