autocorrect

Possible values are:

on or "" (the empty string)

Enable automatic correction of spelling and punctuation errors.

off

Disable automatic correction of editable text.

The <input> element types that don't support auto-correction always have the off state: password, email and url.

For all other editable elements, setting any other value than those listed above is always treated as on. The default value for elements that are not nested inside a <form> is on.

When nested in a <form>, the following elements inherit their their default value of autocorrect from the form if it has been set: <button>, <fieldset>, <input>, <output>, <select>, and <textarea>.

This example demonstrates basic autocorrect attribute usage.

HTML

We include two text <input> elements with different values for their autocorrect attributes:

<label for="vegetable">A vegetable: </label>
<input id="vegetable" name="vegetable" type="text" autocorrect="on" />

<label for="fruit">A fruit: </label>
<input id="fruit" name="fruit" type="text" autocorrect="off" />

Results

Enter invalid text into the fruit and vegetable text entry boxes above. 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.

This example shows how you can enable and disable autocorrection using the autocorrect attribute.

HTML

The HTML markup defines a <button>, a "name" <input> element of type="text", a "bio" <textarea> element, and two <label> elements.

The "username" element has autocorrect="off" set because auto-correcting a name would be annoying! The bio does not specify a value for autocorrect, which means that it is enabled (we could have set any value other than off).

<button id="reset">Reset</button>
<label for="username">Name: </label>
<input id="username" name="username" type="text" autocorrect="off" />
<label for="bio">Biography: </label>
<textarea id="bio" name="bio"></textarea>

<pre id="log"></pre>

#log {
  height: 75px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

button,
input,
textarea {
  display: block;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

The code checks whether the autocorrect is supported by checking if it is present on the prototype. If it is not present this fact is logged. If it is present then the value of the autocorrect property for each of the text-entry elements is logged.

A click handler is added for the button, which allows you to reset the entered text and the log.

const resetButton = document.querySelector("#reset");
const userNameElement = document.querySelector("#username");
const bioElement = document.querySelector("#bio");

if (!("autocorrect" in HTMLElement.prototype)) {
  log("autocorrect not supported");
} else {
  log(`userNameElement.autocorrect: ${userNameElement.autocorrect}`);
  log(`bioElement.autocorrect: ${bioElement.autocorrect}`);
}

resetButton.addEventListener("click", (e) => {
  userNameElement.value = "";
  bioElement.value = "";
});

Results

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.

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).