Skip to content

Commit

Permalink
HTML autocorrect - clarify device-specific subsitutions (#36972)
Browse files Browse the repository at this point in the history
* HTML autocorrect - clarify device-specific subsitutions

* Apply suggestions from code review

Co-authored-by: sideshowbarker <[email protected]>

---------

Co-authored-by: sideshowbarker <[email protected]>
  • Loading branch information
hamishwillee and sideshowbarker authored Nov 28, 2024
1 parent f9a4c85 commit 6b278eb
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 7 deletions.
11 changes: 8 additions & 3 deletions files/en-us/web/api/htmlelement/autocorrect/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ browser-compat: api.HTMLElement.autocorrect

{{APIRef("HTML DOM")}}{{SeeCompatTable}}

The **`autocorrect`** property of the {{domxref("HTMLElement")}} interface controls whether or not user text input is automatically corrected for spelling and/or punctuation errors.
The **`autocorrect`** property of the {{domxref("HTMLElement")}} interface controls whether or not autocorrection of editable text is enabled for spelling and/or punctuation errors.

The specific autocorrection behavior, including which words are substituted, depends on the user agent and the services provided by the underlying device.
For example, on macOS a user agent might rely on [registered replacement text and punctuation](https://support.apple.com/en-vn/guide/mac-help/mh35735/mac).
Other devices and browsers may use a different approach.

The property reflects the value of the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.

Expand Down Expand Up @@ -88,8 +92,9 @@ if (`autocorrect` in HTMLElement.prototype) {

<!-- cSpell:ignore Carot -->

Activate the button to toggle the autocorrect value. Enter invalid text into the text box, such as "Carot".
This should be corrected automatically when the feature is enabled.
Activate the button to toggle the autocorrect value.
Enter invalid text into the text box, such as "Carot".
When the autocorrect is enabled, and if the implementation has the appropriate substitute word "carrot", the text should automatically be corrected.

{{EmbedLiveSample("Enable and disable autocorrection", "100%", "200")}}

Expand Down
15 changes: 11 additions & 4 deletions files/en-us/web/html/global_attributes/autocorrect/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ browser-compat: html.global_attributes.autocorrect

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

The **`autocorrect`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](/en-US/docs/Glossary/Enumerated) attribute that controls whether editable text is automatically corrected for spelling and/or punctuation errors.
The **`autocorrect`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) is an [enumerated](/en-US/docs/Glossary/Enumerated) attribute that controls whether autocorrection of editable text is enabled for spelling and/or punctuation errors.

The specific autocorrection behavior, including which words are substituted, depends on the user agent and the services provided by the underlying device.
For example, on macOS a user agent might rely on [registered replacement text and punctuation](https://support.apple.com/en-vn/guide/mac-help/mh35735/mac).
Other devices and browsers may use a different approach.

Autocorrection is relevant to editable text elements:

Expand Down Expand Up @@ -62,7 +66,8 @@ We include two text `<input>` elements with different values for their `autocorr
{{EmbedLiveSample("Basic example", "100%", "75")}}

Enter invalid text into the fruit and vegetable text entry boxes above.
If auto-correction is enabled on your browser, a typo in a vegetable name should be auto-corrected, but not in a fruit name.
If auto-correction is supported on your browser, and there is an appropriate substitution provided by the underlying device, a typo in a vegetable name input should be auto-corrected.
Typos should not be corrected in the fruit name field.

### Enabling and disabling autocorrection

Expand Down Expand Up @@ -138,11 +143,13 @@ resetButton.addEventListener("click", (e) => {

#### Results

Enter invalid text into the name and biography text entry boxes below.
If auto-correction is enabled on your browser (see the log below) the text in the "Biography" should be auto-corrected, but not in the "Name" box.
If auto-correction is supported by your browser, the log area below the "Biography" and "Name" inputs should show that it is enabled for "Biography" inputs but not "Name" inputs.

{{EmbedLiveSample("Enabling and disabling autocorrection", "100%", "250")}}

Enter invalid text into the name and biography text entry boxes.
If the device has a substitute for the entered word, this will be used to autocorrect text in the "Biography" input (only).

## Specifications

{{Specifications}}
Expand Down

0 comments on commit 6b278eb

Please sign in to comment.