Skip to content

Commit

Permalink
Further fixes to autocapitalize content (#30775)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdavidmills
chrisdavidmills authored Dec 4, 2023
1 parent d49a9ce commit 337fde0
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 59 deletions.
15 changes: 1 addition & 14 deletions files/en-us/web/html/element/form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<form>`, 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`

Expand Down
17 changes: 2 additions & 15 deletions files/en-us/web/html/element/input/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ Attributes for the `<input>` 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 |
Expand Down Expand Up @@ -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 `<input>` and {{htmlelement("textarea")}} elements, and on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained inputs (except `url`, `email`, and `password` types) and `<textarea>`s, 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`](/en-US/docs/Web/HTML/Attributes/autocomplete)

Expand Down
15 changes: 1 addition & 14 deletions files/en-us/web/html/element/textarea/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib

- `autocapitalize`

- : Controls whether text entered into `<textarea>`s 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:** `autocapitalize` can be set on `<textarea>` and {{htmlelement("input")}} elements, and on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained `<textarea>`s and inputs (except `url`, `email`, and `password` types), 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`

Expand Down
103 changes: 95 additions & 8 deletions files/en-us/web/html/global_attributes/autocapitalize/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,105 @@ browser-compat: html.global_attributes.autocapitalize

{{HTMLSidebar("Global_attributes")}}

The **`autocapitalize`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](/en-US/docs/Glossary/Enumerated) attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
The **`autocapitalize`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](/en-US/docs/Glossary/Enumerated) attribute that controls whether inputted text is automatically capitalized and, if so, in what manner. This is relevant to:

The attribute must take one of the following values:
- {{htmlelement("input")}} and {{htmlelement("textarea")}} elements.
- Any element with [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) set on it.

- `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
`autocapitalize` doesn't affect behavior when typing on a physical keyboard. It affects the behavior of other input mechanisms such as virtual keyboards on mobile devices and voice input. This can assist users by making data entry quicker and easier, for example by automatically capitalizing the first letter of each sentence.

The `autocapitalize` attribute doesn't affect behavior when typing on a physical keyboard. Instead, it affects the behavior of other input mechanisms, such as virtual keyboards on mobile devices and voice input. The behavior of such mechanisms is that they often assist users by automatically capitalizing the first letter of sentences. The `autocapitalize` attribute enables authors to override that behavior per-element.
## Value

The `autocapitalize` attribute never causes autocapitalization to be enabled for an {{HTMLElement("input")}} element with a [`type`](/en-US/docs/Web/HTML/Element/input#type) attribute whose value is `url`, `email`, or `password`.
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.

## Usage notes

- `autocapitalize` can be set on `<input>` and `<textarea>` elements, _and_ on their containing {{htmlelement("form")}} elements. When `autocapitalize` is set on a `<form>` element, it sets the autocapitalize behavior for all contained `<input>`s and `<textarea>`s, overriding any `autocapitalize` values set on contained elements.
- `autocapitalize` has no effect on the `url`, `email`, or `password` `<input>` types, where autocapitalization is never enabled.
- Where `autocapitalize` is not specified, the adopted default behavior varies between browsers. For example:
- Chrome and Safari default to `on`/`sentences`
- Firefox defaults to `off`/`none`.

## Examples

### HTML

```html
<p>Form to test different autocapitalize settings:</p>

<form>
<div>
<label for="default">Default: no autocapitalize set</label>
<input type="text" id="default" name="default" />
</div>
<div>
<label for="off">autocapitalize="off"</label>
<input type="text" id="off" name="off" autocapitalize="off" />
</div>
<div>
<label for="none">autocapitalize="none"</label>
<input type="text" id="none" name="none" autocapitalize="none" />
</div>
<div>
<label for="on">autocapitalize="on"</label>
<input type="text" id="on" name="on" autocapitalize="on" />
</div>
<div>
<label for="sentences">autocapitalize="sentences"</label>
<input
type="text"
id="sentences"
name="sentences"
autocapitalize="sentences" />
</div>
<div>
<label for="words">autocapitalize="words"</label>
<input type="text" id="words" name="words" autocapitalize="words" />
</div>
<div>
<label for="characters">autocapitalize="characters"</label>
<input
type="text"
id="characters"
name="characters"
autocapitalize="characters" />
</div>
<div>
<label for="characters-ta">autocapitalize="characters" on textarea</label>
<textarea
type="text"
id="characters-ta"
name="characters-ta"
autocapitalize="characters">
</textarea>
</div>
</form>

<hr />

<p contenteditable autocapitalize="characters">
This content is editable and has autocapitalize="characters" set on it
</p>
```

```css hidden
div {
margin-bottom: 20px;
}
```

## Result

{{ EmbedLiveSample("Examples", "100%", "500") }}

## Specifications

Expand Down
9 changes: 1 addition & 8 deletions files/en-us/web/html/global_attributes/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 337fde0

Please sign in to comment.