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 enabled on your browser, a typo in a vegetable name should be auto-corrected, but not in a fruit name.

This example shows how you can enable and disable auto-correction 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(`userNameElement.autocorrect: ${bioElement.autocorrect}`);
}

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

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.