autocapitalize глобальный атрибут HTML

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

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

Результат

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

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

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