HTML autocorrect attribute

files/en-us/web/api/htmlelement/autocorrect/index.md

@@ -0,0 +1,109 @@
+---
+title: "HTMLElement: autocorrect property"
+short-title: autocorrect
+slug: Web/API/HTMLElement/autocorrect
+page-type: web-api-instance-property
+browser-compat: api.HTMLElement.autocorrect
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`autocorrect`** property of the {{domxref("HTMLElement")}} interface controls whether or not user text input is automatically corrected for spelling and/or punctuation errors.
+
+While it is available on all HTML elements, it is only relevant to editable text elements:
+
+- {{htmlelement("input")}} elements and {{domxref("HTMLInputElement")}} objects, except for [`password`](/en-US/docs/Web/HTML/Element/input/password), [`email`](/en-US/docs/Web/HTML/Element/input/email), and [`url`](/en-US/docs/Web/HTML/Element/input/url), which do not support autocorrection.
+- {{htmlelement("textarea")}} elements and {{domxref("HTMLTextAreaElement")}} objects.
+- Any element that has the [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set.
+
+Editable text elements (other than the exceptions listed above) have auto-correction enabled by default, except for within a {{htmlelement("form")}} element, where the default value may be inherited from the form.
+Elements nested within an element that was made editable using the `contenteditable` do not inherit its auto-correction attribute.
+Explicitly setting the attribute on an element overrides the default and any inherited value.
+
+The property reflects the value of the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.
+
+## Value
+
+`true` if autocorrection is enabled for the element, and `false` otherwise.
+
+## Examples
+
+### Enable and disable autocorrection
+
+This example shows how you can enable and disable auto-correction.
+
+#### HTML
+
+The HTML markup defines a toggle button and an {{htmlelement("input")}} element of [`type="search"`](/en-US/docs/Web/HTML/Element/input/search).
+Note that if auto-correction is supported, it will be enabled by default.
+
+```html
+<button id="toggleAutocorrect"></button>
+<input type="search" id="searchinput" />
+```
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+#### JavaScript
+
+The code first checks whether the `autocorrect` is supported by checking if it is present on the prototype.
+If it is present a click handler is added to allow you to toggle the value.
+If it is not present the UI hides the interactive elements and logs that `autocorrect` is not supported.
+
+```js
+const toggleButton = document.querySelector("button");
+const searchInput = document.querySelector("#searchinput");
+
+if (`autocorrect` in HTMLElement.prototype) {
+  toggleButton.textContent = searchInput.autocorrect ? "Disable" : "Enable";
+  log(`autocorrect: ${searchInput.autocorrect}`);
+
+  toggleButton.addEventListener("click", (e) => {
+    toggleButton.textContent = searchInput.autocorrect ? "Disable" : "Enable";
+    searchInput.autocorrect = !searchInput.autocorrect;
+    log(`autocorrect: ${searchInput.autocorrect}`);
+  });
+} else {
+  toggleButton.hidden = true;
+  searchInput.hidden = true;
+  log("autcorrect not supported");
+}
+```
+
+#### Result
+
+Toggle the button to enable autocorrect, and then enter invalid text into the text box, such as "Carot".
+This should be corrected automatically when the feature is enabled.
+
+{{EmbedLiveSample("Enable and disable autocorrection", "100%", "200")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize) HTML global attribute

files/en-us/web/api/htmlelement/index.md

@@ -23,10 +23,13 @@ _Also inherits properties from its parent, {{DOMxRef("Element")}}._
   - : Returns a reference to the element's anchor element, or `null` if it doesn't have one.
 - {{DOMxRef("HTMLElement.attributeStyleMap")}} {{ReadOnlyInline}}
   - : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute.
-- {{domxref("HTMLElement.autocapitalize", "autocapitalize")}}
+- {{domxref("HTMLElement.autocapitalize")}}
   - : A string that represents the element's capitalization behavior for user input. Valid values are: `none`, `off`, `on`, `characters`, `words`, `sentences`.
 - {{domxref("HTMLElement.autofocus")}}
   - : A boolean value reflecting the [`autofocus`](/en-US/docs/Web/HTML/Element/select#autofocus) HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside {{htmlelement("dialog")}} elements or elements whose popover attribute is set.
+- {{domxref("HTMLElement.autocorrect")}}
+  - : A boolean that represents whether or not text input by a user should be automatically corrected.
+    This reflects the [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) HTML global attribute.
 - {{DOMxRef("HTMLElement.contentEditable")}}
   - : A string, where a value of `true` means the element is editable and a value of `false` means it isn't.
 - {{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}}

files/en-us/web/html/element/input/email/index.md

@@ -25,7 +25,7 @@ See [Validation](#validation) for details on how email addresses are validated t
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `email` inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)), and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `email` inputs support the following attributes.
 
 ### list
 

files/en-us/web/html/element/input/index.md

@@ -642,17 +642,10 @@ The following non-standard attributes are also available on some browsers. As a
     </tr>
   </thead>
   <tbody>
-    <tr>
-      <td><a href="#autocorrect"><code>autocorrect</code></a></td>
-      <td>
-        A string indicating whether autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong>
-      </td>
-    </tr>
     <tr>
       <td><a href="#incremental"><code>incremental</code></a></td>
       <td>
-        Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}}
-        events to allow updating live search results while the user is still editing the value of the field.
+        Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}} events to allow updating live search results while the user is still editing the value of the field.
         <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong>
       </td>
     </tr>
@@ -688,15 +681,6 @@ The following non-standard attributes are also available on some browsers. As a
   </tbody>
 </table>
 
-- `autocorrect` {{non-standard_inline}}
-
-  - : (Safari only). A string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
-
-    - `on`
-      - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-    - `off`
-      - : Disable automatic correction and text substitutions.
-
 - `incremental` {{non-standard_inline}}
 
   - : The Boolean attribute `incremental` is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{domxref("HTMLInputElement/search_event", "search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.

files/en-us/web/html/element/input/password/index.md

@@ -33,7 +33,7 @@ If the [`pattern`](/en-US/docs/Web/HTML/Element/input#pattern) attribute is spec
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, password field inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)), and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, password field inputs support the following attributes.
 
 ### maxlength
 

files/en-us/web/html/element/input/search/index.md

@@ -23,7 +23,7 @@ If no validation constraints are in place for the input (see [Validation](#valid
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes.
 
 ### list
 
@@ -91,16 +91,8 @@ The value returned by reading `spellcheck` may not reflect the actual state of s
 
 ## Non-standard attributes
 
-The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.
-
-### autocorrect
-
-A Safari extension, the `autocorrect` attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
+The following non-standard attributes are available to search input fields.
+Avoid using them where possible.
 
 ### incremental
 

files/en-us/web/html/element/input/tel/index.md

@@ -22,7 +22,7 @@ The {{HTMLElement("input")}} element's [`value`](/en-US/docs/Web/HTML/Element/in
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes.
 
 ### list
 
@@ -73,19 +73,6 @@ The `size` attribute is a numeric value indicating how many characters wide the
 
 This does _not_ set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the [`maxlength`](#maxlength) attribute.
 
-## Non-standard attributes
-
-The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.
-
-### autocorrect
-
-A Safari extension, the `autocorrect` attribute is a string which indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
-
 ## Using tel inputs
 
 Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.

files/en-us/web/html/element/input/text/index.md

@@ -23,7 +23,7 @@ If no validation constraints are in place for the input (see [Validation](#valid
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, text inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, text inputs support the following attributes.
 
 ### `list`
 
@@ -89,19 +89,6 @@ An input field can have spell-checking enabled if it doesn't have the [readonly]
 
 The value returned by reading `spellcheck` may not reflect the actual state of spell-checking within a control, if the {{Glossary("user agent", "user agent's")}} preferences override the setting.
 
-## Non-standard attributes
-
-The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.
-
-### `autocorrect`
-
-A Safari extension, the `autocorrect` attribute is a string that indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
-
 ## Using text inputs
 
 `<input>` elements of type `text` create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value and there isn't a more specific input type available for collecting that value (for example, if it's a [date](/en-US/docs/Web/HTML/Element/input/datetime-local), [URL](/en-US/docs/Web/HTML/Element/input/url), [email](/en-US/docs/Web/HTML/Element/input/email), or [search term](/en-US/docs/Web/HTML/Element/input/search), you've got better options available).

files/en-us/web/html/element/input/url/index.md

@@ -24,7 +24,7 @@ See [Validation](#validation) for details on how URLs are validated to ensure th
 
 ## Additional attributes
 
-In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `url` inputs support the following attributes.
+In addition to the [global attributes](/en-US/docs/Web/HTML/Global_attributes) (except [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)) and the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, `url` inputs support the following attributes.
 
 ### list
 
@@ -90,19 +90,6 @@ An input field can have spell-checking enabled if it doesn't have the [readonly]
 
 The value returned by reading `spellcheck` may not reflect the actual state of spell-checking within a control if the {{Glossary("user agent", "user agent's")}} preferences override the setting.
 
-## Non-standard attributes
-
-The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.
-
-### autocorrect
-
-A Safari extension, the `autocorrect` attribute is a string that indicates whether to activate automatic correction while the user is editing this field. Permitted values are:
-
-- `on`
-  - : Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
-- `off`
-  - : Disable automatic correction and text substitutions.
-
 ## Using URL inputs
 
 When you create a URL input with the proper `type` value, `url`, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mistypes their website's address, or provides an invalid one.

files/en-us/web/html/element/textarea/index.md

@@ -26,30 +26,31 @@ The `<textarea>` element also accepts several attributes common to form `<input>
 
 This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
 
-- `autocapitalize`
+- [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize)
 
-  - : 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.
+  - : A string that indicates whether input text is automatically capitalized and, if so, in what manner.
 
 - [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete)
 
-  - : This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:
+  - : A string that indicates whether the value of the control can be automatically completed by the browser. Possible values are:
 
     - `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
     - `on`: The browser can automatically complete the value based on values that the user has entered during previous uses.
     - [`<token-list>`](/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens): An ordered set of space-separated autofill detail tokens, optionally preceded by a sectioning token, a billing or shipping grouping token, and/or a token identifying the type of recipient.
 
     `<textarea>` elements that don't specify the `autocomplete` attribute inherit the `autocomplete` `on` or `off` status set on the `<textarea>`'s form owner. The form owner is either the {{HTMLElement("form")}} element that this `<textarea>` element is a descendant of or the form element whose `id` is specified by the `form` attribute of the input element. For more information, see the [`autocomplete`](/en-US/docs/Web/HTML/Element/form#autocomplete) attribute in {{HTMLElement("form")}}.
 
-- `autocorrect` {{non-standard_inline}}
+- [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)
 
-  - : A string which indicates whether to activate automatic spelling correction and processing of text substitutions (if any are configured) while the user is editing this `textarea`. Permitted values are:
+  - : A string that indicates whether to activate automatic spelling correction and processing of text while the user is editing this `textarea`.
+    Permitted values are:
 
     - `on`
       - : Enable automatic spelling correction and text substitutions.
     - `off`
       - : Disable automatic spelling correction and text substitutions.
 
-- `autofocus`
+- [`autofocus`](/en-US/docs/Web/HTML/Global_attributes/autofocus)
   - : This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
 - `cols`
   - : The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is `20`.