这项功能看起来可能最不起眼,但我认为它很重要,因为每个人都讨厌在移动设备上打字:您讨厌,我也讨厌。在 Android 版 Chrome(2015 年 4 月之前的 Chrome 43 之前的 Beta 版)中,开发者对浏览器如何帮助用户输入文本几乎没有控制权。如果您现在在设备上输入内容,界面可能如下所示:
请注意,除了 Android 识别为名称的某些值之外,所有内容均采用小写形式。
Apple 在 iOS 5 中为 HTMLInputElement
和 HTMLTextAreaElement
引入了一个名为 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">
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。