HTMLElement: autocapitalize property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input. It is available on all HTML elements, though it doesn't affect all of them, including:

autocapitalize doesn't affect behavior when typing on a physical keyboard. It affects the behavior of other input mechanisms such as virtual keyboards on mobile devices and voice input. This can assist users by making data entry quicker and easier, for example by automatically capitalizing the first letter of each sentence.

It reflects the value of the autocapitalize HTML global attribute.

Value

A string that represents the element's capitalization behavior for user input. Valid values are as follows:

none or off

No autocapitalization should be applied, that is, all letters should default to lowercase.

sentences or on

The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.

words

The first letter of each word should default to a capital letter; all other letters should default to lowercase.

characters

All letters should default to uppercase.

Examples

The following example shows how to control capitalization behavior for user input via script:

html
<div>Current capitalization behavior is: <span id="ac-label"></span></div>
<div id="ac-element" contenteditable="true" autocapitalize="default">
  input here
</div>
<select id="ac-controller" type="checkbox" checked>
  <option value="default">default</option>
  <option value="none">none</option>
  <option value="sentences">sentences</option>
  <option value="words">words</option>
  <option value="characters">characters</option></select
>Select the capitalization behavior
js
const label = document.getElementById("ac-label");
const element = document.getElementById("ac-element");
const controller = document.getElementById("ac-controller");

controller.addEventListener("input", (e) => {
  const behavior = e.target.value;
  label.textContent = behavior;
  element.autocapitalize = behavior;
});

Specifications

Specification
HTML
# dom-autocapitalize-dev

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
autocapitalize
Chrome – Partial support
Chrome 43 – 65 (Release date: 2015-05-19)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
Chrome – Full support
Chrome 66 (Release date: 2018-04-17)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 111 (Release date: 2023-03-14)
footnote Full support
Opera – Partial support
Opera 30 – 52 (Release date: 2015-06-09)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
Opera – Full support
Opera 53 (Release date: 2018-05-10)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Partial support
Chrome Android 43 – 65 (Release date: 2015-05-27)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
Chrome Android – Full support
Chrome Android 66 (Release date: 2018-04-17)
footnote Full support
Firefox for Android – Full support
Firefox for Android 111 (Release date: 2023-03-14)
footnote Full support
Opera Android – Partial support
Opera Android 30 – 46 (Release date: 2015-06-10)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
Opera Android – Full support
Opera Android 47 (Release date: 2018-07-23)
footnote Full support
Safari on iOS – Partial support
Safari on iOS 3 – 10 (Release date: 2009-06-17)
footnote Partial support
footnote Supported on HTMLFormElement, HTMLInputElement, and HTMLTextAreaElement only.
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Partial support
Samsung Internet 4 – 8.2 (Release date: 2016-03-11)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Partial support
WebView Android 43 – 65 (Release date: 2015-05-27)
footnote Partial support
footnote Supported on HTMLInputElement and HTMLTextAreaElement only.
WebView Android – Full support
WebView Android 66 (Release date: 2018-04-17)
footnote Full support
WebView on iOS – Partial support
WebView on iOS 3 – 10 (Release date: 2009-06-17)
footnote Partial support
footnote Supported on HTMLFormElement, HTMLInputElement, and HTMLTextAreaElement only.
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

See also