Атрибут readonly тега <textarea>
Описание
Атрибут readonly в теге <textarea> делает текстовое поле доступным только для чтения. Пользователь может выделять и копировать текст, но не может его редактировать. В отличие от disabled, поле сохраняет стандартный внешний вид и его значение отправляется с формой.
<textarea readonly>
Этот текст можно копировать, но нельзя изменять
</textarea>
Особенности работы:
- Поле получает фокус при навигации по странице
- Текст можно выделять и копировать
- Значение отправляется при отправке формы
- Визуально выглядит как обычное поле ввода
Рекомендации:
- Используйте для отображения системной информации
- Сочетайте с CSS для визуального выделения
- Для временного блокирования используйте JavaScript
- Добавляйте пояснение о статусе поля
Пример с CSS стилизацией:
<style>
textarea[readonly] {
background-color: #f8f9fa;
border-color: #ced4da;
cursor: not-allowed;
}
</style>
<textarea readonly>
Текст только для чтения. Вы можете его скопировать.
</textarea>
Ограничения:
- Не защищает от изменения через DevTools
- Не предотвращает вставку текста через JavaScript
- Требует серверной проверки для безопасности
- Может сбивать пользователей (выглядит как редактируемое)
Сравнение с disabled:
| Характеристика | readonly | disabled |
|---|---|---|
| Редактирование | Запрещено | Запрещено |
| Фокус | Доступен | Недоступен |
| Отправка данных | Да | Нет |
| Визуальный стиль | Обычный | Серый, неактивный |
Пример хорошей практики:
<div class="readonly-field">
<label>Текущий статус:</label>
<textarea readonly aria-label="Текущий статус (только для чтения)">
Заявка одобрена 15.07.2025
</textarea>
<span class="status-hint">(информация только для просмотра)</span>
</div>
<style>
.readonly-field {
margin-bottom: 1rem;
}
.status-hint {
font-size: 0.8em;
color: #666;
display: block;
}
</style>
Примечание: Для защиты важных данных:
- Всегда проверяйте данные на сервере
- Рассмотрите использование скрытых полей (input type="hidden")
- Для конфиденциальной информации используйте обычные блоки текста