автозаглавие

Атрибут autocapitalize глобального атрибута — это перечисляемый атрибут, который управляет тем, автоматически ли заглавниваются вводимые тексты и, если да, то каким образом. Это актуально для:

<input> и <textarea> элементов.
Любого элемента с contenteditable, установленным на нём.

autocapitalize не влияет на поведение при наборе текста на физической клавиатуре. Он влияет на поведение других механизмов ввода, таких как виртуальные клавиатуры на мобильных устройствах и голосовое ввод. Это может помочь пользователям, ускорить и упростить ввод данных, например, автоматически заглавив первую букву каждого предложения.

Значение

Возможные значения:

none или off: Не производить автоматическое заглавие текста.
sentences или on: Автоматически заглавливать первую букву каждого предложения.
words: Автоматически заглавливать первую букву каждого слова.
characters: Автоматически заглавливать каждый символ.

Примечания к использованию

autocapitalize может быть задан на элементах <input> и <textarea> и, кроме того, на содержащих их элементах <form>. Когда autocapitalize задан на элементе <form> , он устанавливает поведение автозаглавия для всех содержащихся <input> и <textarea> элементов, перезаписывая любые значения autocapitalize , заданные на содержащихся элементах.
autocapitalize не влияет на типы url, email, или password <input> , где автоматическое заглавие никогда не включается.
В случае, когда autocapitalize не указан, принятое значение по умолчанию различается в различных браузерах. Например:
- По умолчанию в Chrome и Safari используется on/sentences
- По умолчанию в Firefox используется off/none.

Примеры

HTML

html

<p>Form to test different autocapitalize settings:</p>

<form>
  <div>
    <label for="default">Default: no autocapitalize set</label>
    <input type="text" id="default" name="default" />
  </div>
  <div>
    <label for="off">autocapitalize="off"</label>
    <input type="text" id="off" name="off" autocapitalize="off" />
  </div>
  <div>
    <label for="none">autocapitalize="none"</label>
    <input type="text" id="none" name="none" autocapitalize="none" />
  </div>
  <div>
    <label for="on">autocapitalize="on"</label>
    <input type="text" id="on" name="on" autocapitalize="on" />
  </div>
  <div>
    <label for="sentences">autocapitalize="sentences"</label>
    <input
      type="text"
      id="sentences"
      name="sentences"
      autocapitalize="sentences" />
  </div>
  <div>
    <label for="words">autocapitalize="words"</label>
    <input type="text" id="words" name="words" autocapitalize="words" />
  </div>
  <div>
    <label for="characters">autocapitalize="characters"</label>
    <input
      type="text"
      id="characters"
      name="characters"
      autocapitalize="characters" />
  </div>
  <div>
    <label for="characters-ta">autocapitalize="characters" on textarea</label>
    <textarea
      type="text"
      id="characters-ta"
      name="characters-ta"
      autocapitalize="characters">
    </textarea>
  </div>
</form>

<hr />

<p contenteditable autocapitalize="characters">
  This content is editable and has autocapitalize="characters" set on it
</p>

Результат

Протестируйте эффект на каждом поле ввода, используя виртуальную клавиатуру или голосовое ввод (ввод с клавиатуры не сработает).

Спецификации

Спецификация
HTML Стандарт # attr-autocapitalize

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`autocapitalize`	43	79	111	30	Нет	43	111	30	5	4.0	43

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize