From 337fde08da46e0861c40458357831bba582439c5 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 4 Dec 2023 14:28:33 +0000 Subject: [PATCH] Further fixes to autocapitalize content (#30775) --- files/en-us/web/html/element/form/index.md | 15 +-- files/en-us/web/html/element/input/index.md | 17 +-- .../en-us/web/html/element/textarea/index.md | 15 +-- .../global_attributes/autocapitalize/index.md | 103 ++++++++++++++++-- .../en-us/web/html/global_attributes/index.md | 9 +- 5 files changed, 100 insertions(+), 59 deletions(-) diff --git a/files/en-us/web/html/element/form/index.md b/files/en-us/web/html/element/form/index.md index 74de684188c2546..89e78ab247d9dfc 100644 --- a/files/en-us/web/html/element/form/index.md +++ b/files/en-us/web/html/element/form/index.md @@ -30,20 +30,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib - `autocapitalize` - - : Controls whether text entered into the form is automatically capitalized on mobile browsers and, if so, in what manner. The possible values are: - - - `none` or `off` - - : Do not automatically capitalize any text. - - `sentences` or `on` - - : Automatically capitalize the first character of each sentence. - - `words` - - : Automatically capitalize the first character of each word. - - `characters` - - : Automatically capitalize every character. - - > **Note:** When `autocapitalize` is set on a `
`, it controls the autocapitalization behavior of all contained {{htmlelement("input")}} (except `url`, `email`, and `password` types) and {{htmlelement("textarea")}} elements, overriding any `autocapitalize` values set on contained elements. - - > **Note:** Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. Chrome (Android) and Safari (iOS) default to `on`/`sentences`, while Firefox (Android) defaults to `off`/`none`. + - : Controls whether inputted text is automatically capitalized and, if so, in what manner. See the [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize) global attribute page for more information. - `autocomplete` diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index 61599feabdc03df..c50b4d1077bc94d 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -321,7 +321,7 @@ Attributes for the `` element include the [global HTML attributes](/en-US | --------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | [`accept`](#accept) | `file` | Hint for expected file type in file upload controls | | [`alt`](#alt) | `image` | alt attribute for the image type. Required for accessibility | -| [`autocapitalize`](#autocapitalize) | all except `url`, `email`, and `password` | Controls text capitalization in mobile browsers. | +| [`autocapitalize`](#autocapitalize) | all except `url`, `email`, and `password` | Controls automatic capitalization in inputted text. | | [`autocomplete`](#autocomplete) | all except `checkbox`, `radio`, and buttons | Hint for form autofill feature | | [`capture`](#capture) | `file` | Media capture input method in file upload controls | | [`checked`](#checked) | `checkbox`, `radio` | Whether the command or control is checked | @@ -368,20 +368,7 @@ A few additional non-standard attributes are listed following the descriptions o - `autocapitalize` - - : Controls whether text entered into input fields is automatically capitalized on mobile browsers and, if so, in what manner. This attribute does not affect the `url`, `email`, or `password` input types, where autocapitalization is never enabled. The possible values are: - - - `none` or `off` - - : Do not automatically capitalize any text. - - `sentences` or `on` - - : Automatically capitalize the first character of each sentence. - - `words` - - : Automatically capitalize the first character of each word. - - `characters` - - : Automatically capitalize every character. - - > **Note:** `autocapitalize` can be set on `` and {{htmlelement("textarea")}} elements, and on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `` element, it sets the autocapitalize behavior for all contained inputs (except `url`, `email`, and `password` types) and ` + +
+ +
+ +

+ This content is editable and has autocapitalize="characters" set on it +

+``` + +```css hidden +div { + margin-bottom: 20px; +} +``` + +## Result + +{{ EmbedLiveSample("Examples", "100%", "500") }} ## Specifications diff --git a/files/en-us/web/html/global_attributes/index.md b/files/en-us/web/html/global_attributes/index.md index 4c2aba99fae3809..4afc78e22f1f067 100644 --- a/files/en-us/web/html/global_attributes/index.md +++ b/files/en-us/web/html/global_attributes/index.md @@ -22,14 +22,7 @@ In addition to the basic HTML global attributes, the following global attributes - [`accesskey`](/en-US/docs/Web/HTML/Global_attributes/accesskey) - : Provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters. The browser should use the first one that exists on the computer keyboard layout. - [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize) - - - : Controls whether and how text input is automatically capitalized as it is entered/edited by the user. It can have the following values: - - - `off` or `none`, no autocapitalization is applied (all letters default to lowercase) - - `on` or `sentences`, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase - - `words`, the first letter of each word defaults to a capital letter; all other letters default to lowercase - - `characters`, all letters should default to uppercase - + - : Controls whether inputted text is automatically capitalized and, if so, in what manner. - [`autofocus`](/en-US/docs/Web/HTML/Global_attributes/autofocus) - : Indicates that an element is to be focused on page load, or as soon as the {{HTMLElement("dialog")}} it is part of is displayed. This attribute is a boolean, initially false. - [`class`](/en-US/docs/Web/HTML/Global_attributes/class)