diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index 0ef0176ac46471a..60ca19e6ff7570c 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -639,17 +639,10 @@ The following non-standard attributes are also available on some browsers. As a - - autocorrect - - A string indicating whether autocorrect is on or off. Safari only. - - incremental - 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. WebKit and Blink only (Safari, Chrome, Opera, etc.). @@ -685,15 +678,6 @@ The following non-standard attributes are also available on some browsers. As a -- `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. diff --git a/files/en-us/web/html/element/input/search/index.md b/files/en-us/web/html/element/input/search/index.md index 365bc070046f946..2ee4c35ef7b2d62 100644 --- a/files/en-us/web/html/element/input/search/index.md +++ b/files/en-us/web/html/element/input/search/index.md @@ -89,19 +89,20 @@ 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 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: +[`autocorrect`](/en-US/docs/Web/HTML/Global_attributes#autocorrect) is a global attribute that is used to indicate whether to activate automatic spelling 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. +## 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. + ### incremental 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. diff --git a/files/en-us/web/html/element/input/tel/index.md b/files/en-us/web/html/element/input/tel/index.md index e3fd5c6335297d6..5a3857ac49900ce 100644 --- a/files/en-us/web/html/element/input/tel/index.md +++ b/files/en-us/web/html/element/input/tel/index.md @@ -24,6 +24,16 @@ The {{HTMLElement("input")}} element's [`value`](/en-US/docs/Web/HTML/Element/in In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes. +### autocorrect + +The [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes#autocorrect) global attribute is used to indicate whether to activate automatic spelling 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. + ### list The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("datalist")}} provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the [`type`](/en-US/docs/Web/HTML/Element/input#type) are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. @@ -77,15 +87,6 @@ This does _not_ set a limit on how many characters the user can enter into the f 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. diff --git a/files/en-us/web/html/element/input/text/index.md b/files/en-us/web/html/element/input/text/index.md index f9b61e364d92bfb..ad93b21767c08a0 100644 --- a/files/en-us/web/html/element/input/text/index.md +++ b/files/en-us/web/html/element/input/text/index.md @@ -25,6 +25,16 @@ If no validation constraints are in place for the input (see [Validation](#valid In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, text inputs support the following attributes. +### autocorrect + +The [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect) global 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. + ### `list` The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The {{HTMLElement("datalist")}} provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the [`type`](/en-US/docs/Web/HTML/Element/input#type) are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. @@ -93,15 +103,6 @@ The value returned by reading `spellcheck` may not reflect the actual state of s 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 `` 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). diff --git a/files/en-us/web/html/element/input/url/index.md b/files/en-us/web/html/element/input/url/index.md index 244f4fb97920f90..e882910a7c95ac2 100644 --- a/files/en-us/web/html/element/input/url/index.md +++ b/files/en-us/web/html/element/input/url/index.md @@ -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. diff --git a/files/en-us/web/html/element/textarea/index.md b/files/en-us/web/html/element/textarea/index.md index 0d9b66fa1a77cda..7a6a89b8358e7de 100644 --- a/files/en-us/web/html/element/textarea/index.md +++ b/files/en-us/web/html/element/textarea/index.md @@ -24,29 +24,30 @@ The ` + +``` + +```html +
+ + +
+``` + +```html hidden +

+```
+
+```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;
+}
+```
+
+```js
+const formElement = document.querySelector("#formelem");
+console.log(formElement);
+log(formElement);
+log(`formElement: ${formElement.autocorrect}`);
+
+const searchElement = document.querySelector("#searchelem");
+console.log(searchElement);
+log(searchElement);
+log(`searchElement: ${searchElement.autocorrect}`);
+
+const textAreaElement = document.querySelector("#textareaelem");
+console.log(textAreaElement);
+log(textAreaElement);
+log(`textAreaElement autocrct: ${textAreaElement.autocorrect}`);
+
+// Test if form element have a default autocorrect value
+
+const formElementNo = document.querySelector("#formelemnoauto");
+console.log(formElementNo);
+log(formElementNo);
+log(`formElementNo: ${formElementNo.autocorrect}`);
+
+const searchElementCont = document.querySelector("#searchelemcont");
+console.log(searchElementCont);
+log(searchElementCont);
+log(`searchElementCont: ${searchElementCont.autocorrect}`);
+
+const textAreaElementCont = document.querySelector("#textareaelemcont");
+console.log(textAreaElementCont);
+log(textAreaElementCont);
+log(`textAreaElementCont autocrct: ${textAreaElementCont.autocorrect}`);
+```
+
+{{EmbedLiveSample("Autocorrection inheritance", "100%", "300")}}
+
+### Setting autocorrect on an editing host
+
+```html
+

+  
Edit this content to add your own quote

+

+
+-- Write your own name here
+```
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js
+const bqElement = document.querySelector("#bq");
+console.log(bqElement);
+log(bqElement);
+log(`bqElement: ${bqElement.autocorrect}`);
+const paraElement = document.querySelector("#para");
+log(`paraElement: ${paraElement.autocorrect}`);
+const citeElement = document.querySelector("#cite");
+log(`citeElement: ${citeElement.autocorrect}`);
+console.log(citeElement);
+```
+
+{{EmbedLiveSample("Setting autocorrect on an editing host", "100%", "300")}}
+
+### Setting autocorrect on a password
+
+To tell the user's browser that the password field must have a valid value before the form can be submitted, specify the Boolean [`required`](/en-US/docs/Web/HTML/Element/input#required) attribute.
+
+```html
+
+
+
+```
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```js
+const passwordElement = document.querySelector("#userPassword");
+console.log(`passwordElem: ${passwordElement.autocorrect}`);
+log(`passwordElem: ${passwordElement.autocorrect}`);
+/*
+
+*/
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+{{EmbedLiveSample("Setting autocorrect on a password", "100%", "300")}}
+
+### Test
+
+#### HTML
+
+```html
+
Form to test different autocorrect settings:

+
+

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+  

+    
+    
+  

+

+
+

+
+

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

+```
+
+```css hidden
+div {
+  margin-bottom: 20px;
+}
+```
+
+#### Result
+
+Test the effect on each input using a virtual keyboard or voice entry (keyboard entry will not work).
+
+{{ EmbedLiveSample("Test", "100%", "300")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/html/global_attributes/index.md b/files/en-us/web/html/global_attributes/index.md
index e128939de81e65e..0819b62e38cf2e3 100644
--- a/files/en-us/web/html/global_attributes/index.md
+++ b/files/en-us/web/html/global_attributes/index.md
@@ -25,6 +25,8 @@ In addition to the basic HTML global attributes, the following global attributes
   - : Associates a positioned element with an anchor element. The attribute's value is the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) value of the element you want to anchor the positioned element to. The element can then be positioned [using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using).
 - [`autocapitalize`](/en-US/docs/Web/HTML/Global_attributes/autocapitalize)
   - : Controls whether inputted text is automatically capitalized and, if so, in what manner.
+- [`autocorrect`](/en-US/docs/Web/HTML/Global_attributes/autocorrect)
+  - : Controls whether input text is automatically corrected for spelling errors.
 - [`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)