autocorrect global HTML attribute

concepts

1. Autocorrect Demo

   Side-by-side comparison: one textarea with autocorrect="on" and one with autocorrect="off". Type common misspellings and see the difference in correction behaviour on mobile/desktop systems.

2. Element Types Comparison

   Shows the autocorrect attribute applied to all supported element types — text inputs, textarea, contenteditable — and explains which use cases call for autocorrect on vs off.

3. Form Field Matrix

   A reference table mapping every common form field type to its recommended autocorrect setting with the reasoning — prose and display names need on, usernames, code editors, URLs, and API keys need off. Live input fields let you type into each and feel the difference.

4. Inheritance Tester

   The autocorrect attribute inherits down the DOM tree from ancestors to editable descendants. Test the inheritance chain live: set the attribute on a <form>, <fieldset>, or intermediate <div> and watch all child elements adopt it unless they override it.

5. JS API Inspector

   Chrome 152 also exposes element.autocorrect as a writable IDL property. Select any element, read its current IDL value, set it programmatically, or call removeAttribute — and see the exact JavaScript code to reproduce each operation. A batch table shows the IDL vs attribute state for all elements simultaneously.

6. Shadow DOM Scope

   autocorrect inheritance crosses shadow DOM boundaries: a host element with autocorrect="off" passes the inherited value into its shadow root's editable children, just as it does for light DOM children. Toggle the host attribute and watch both light DOM and shadow DOM inputs update their effective value. Shadow components can still override with an explicit attribute inside the shadow root.

why it shipped

Safari has supported autocorrect="off" on inputs for many years. Chrome 152 adds the attribute to align with Safari, Firefox, and the HTML spec. Before Chrome 152, disabling autocorrect required workarounds like autocomplete="off" (which affects a different thing) or hacks targeting OS-level IME settings. Now autocorrect="off" is a clean, spec-compliant way to disable OS autocorrection.

the API

<!-- Enable autocorrect (default in most contexts) -->
<textarea autocorrect="on"></textarea>

<!-- Disable autocorrect -->
<input type="text" autocorrect="off">

<!-- contenteditable -->
<div contenteditable="true" autocorrect="off"></div>

<!-- Inherits on child elements -->
<form autocorrect="off">
  <!-- All inputs in this form won't autocorrect -->
  <input type="text">
  <textarea></textarea>
</form>

<!-- JavaScript access -->
<script>
  const input = document.querySelector('input');
  input.autocorrect; // "on" | "off"
  input.autocorrect = 'off';
</script>

references

• ChromeStatus entry
• MDN — autocorrect attribute
• HTML spec — autocorrection