Атрибут readonly

Атрибут readonly делает поля формы доступными только для чтения. Пользователь не сможет изменить значение такого поля, но сможет выделить и скопировать текст.

        
          
          <form>  <div>    <label for="username">Имя пользователя</label>    <input type="text" value="Алиса" readonly id="username">  </div>  <div>    <label for="comment">Комментарий</label>    <textarea readonly id="comment">      Этот текст нельзя отредактировать    </textarea>  </div></form>
          <form>
  <div>
    <label for="username">Имя пользователя</label>
    <input type="text" value="Алиса" readonly id="username">
  </div>

  <div>
    <label for="comment">Комментарий</label>
    <textarea readonly id="comment">
      Этот текст нельзя отредактировать
    </textarea>
  </div>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Иногда нужно показать пользователю информацию в поле формы, но при этом запретить её редактирование. Например:

• отображение данных из профиля, которые нельзя изменить;
• показ результатов расчётов;
• демонстрация значений по умолчанию.

В таких случаях пригодится атрибут readonly.

Этот атрибут позволяет:

• выделять и копировать текст;
• полю ввода получать фокус с клавиатуры;
• отправлять данные из поля ввода на сервер;
• стилизовать элемент через CSS при помощи псевдокласса.

readonly — это булевый атрибут, поэтому его можно записать двумя способами:

        
          
          <!-- Полная запись --><input readonly="readonly"><!-- Сокращённая запись --><input readonly>
          <!-- Полная запись -->
<input readonly="readonly">
<!-- Сокращённая запись -->
<input readonly>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В ARIA есть атрибут aria-readonly, который делает то же самое. Но лучше использовать нативный атрибут HTML, а ARIA применять только для элементов, где readonly не поддерживается:

        
          
          <!-- ARIA для кастомных элементов --><custom-input aria-readonly="true">  Нередактируемый текст</custom-input>
          <!-- ARIA для кастомных элементов -->
<custom-input aria-readonly="true">
  Нередактируемый текст
</custom-input>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Атрибут readonly работает с:

• <textarea>
• <input> следующих типов:
  • text
  • search
  • url
  • tel
  • email
  • password
  • date
  • month
  • week
  • time
  • datetime-local
  • number

Атрибут readonly нельзя использовать с:

• <select>
• любыми типами кнопок в <input>
• полями с атрибутом hidden

Также поле с readonly нельзя сделать обязательным через required.

💡 Не путайте readonly с disabled. Неактивные поля (disabled) не получают фокус и не отправляются с формой, а поля только для чтения (readonly) — получают и отправляются.

💡 Для стилизации полей с readonly используйте псевдокласс :read-only, а для редактируемых полей — :read-write.

💡 В JavaScript можно проверить, доступно ли поле для редактирования, через свойство readOnly:

💡 Поля с readonly всё ещё можно изменить через JavaScript или инструменты разработчика. Не используйте этот атрибут для защиты важных данных.

💡 Хотя поле с readonly можно выделить и получить на него фокус, пользователи не могут изменить его значение с клавиатуры.

💡 При отправке формы поля с readonly передаются на сервер, в отличие от полей с disabled.

💡 Атрибут readonly не влияет на события поля. Можно использовать все события, как с обычным полем.

        
          
          [readonly] {  background-color: #f5f5f5;  cursor: not-allowed;}
          [readonly] {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const toggleReadOnly = (event) => {  const input = document.querySelector('input')  input.readOnly = !input.readOnly}
          const toggleReadOnly = (event) => {
  const input = document.querySelector('input')
  input.readOnly = !input.readOnly
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать