这可能看起来是当前最令人印象深刻的功能,但我认为它很重要,因为每个人都不喜欢在移动设备上打字:您讨厌它,我讨厌它。在 Chrome(Android 版之前的 Chrome 43 - 测试版于 2015 年 4 月发布)中,开发者几乎无法控制浏览器如何帮助用户输入文本。如果您今天在设备上输入,界面可能如下所示:
请注意,除了 Android 识别出的一些值外,所有内容均采用小写形式。
Apple 在 HTMLInputElement
和 HTMLTextAreaElement
上引入了一个名为“自动大写”的属性,在 iOS 5 中,它允许网页作者提示浏览器应如何向用户显示虚拟键盘,从而为用户优化文本输入。用最简单的方式,您可以指示文本框应自动将每个新句子的首字母大写。
从 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> |
句首字母大写 | 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
。 - 如果您不想使用提示,请勿添加自动大写。