Атрибут readonly тега <input>
Описание
Атрибут readonly делает поле ввода доступным только для чтения. Пользователь может выделить и скопировать текст, но не может изменить его значение. Отличается от disabled тем, что данные поля отправляются на сервер.
<!-- Поле только для чтения -->
<label for="order-id">Номер заказа:</label>
<input type="text" id="order-id" name="order_id"
value="ORD-2023-15642" readonly>
<!-- Поле с динамическим обновлением -->
<label for="total">Итого:</label>
<input type="text" id="total" name="total"
value="0 ₽" readonly>
Поддерживаемые типы input:
| Тип | Применение | Пример |
|---|---|---|
| text | Отображение неизменяемого текста | <input type="text" readonly> |
| password | Показ хэшированного пароля | <input type="password" readonly> |
| Отображение email без изменения | <input type="email" readonly> |
|
| number | Показ расчитанных значений | <input type="number" readonly> |
| date/time | Отображение системных дат | <input type="date" readonly> |
Пример с динамическим расчетом:
<label for="price">Цена:</label>
<input type="number" id="price" name="price" value="1000">
<label for="quantity">Количество:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1">
<label for="sum">Сумма:</label>
<input type="number" id="sum" name="sum" readonly>
<script>
function calculate() {
const price = document.getElementById('price').value;
const quantity = document.getElementById('quantity').value;
document.getElementById('sum').value = price * quantity;
}
document.getElementById('price').addEventListener('input', calculate);
document.getElementById('quantity').addEventListener('input', calculate);
calculate(); // Инициализация
</script>
Рекомендации:
- Используйте для отображения системных или расчетных данных
- Сочетайте с CSS для визуального выделения readonly-полей
- Для важных данных предусмотрите кнопку "Копировать"
- Не используйте вместо disabled, если данные не должны отправляться
Пример со стилизацией:
<style>
input[readonly] {
background-color: #f8f9fa;
border: 1px solid #ced4da;
cursor: not-allowed;
}
.copyable {
position: relative;
}
.copyable button {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="copyable" style="position:relative">
<label for="ref-link">Реферальная ссылка:</label>
<input type="text" id="ref-link"
value="https://example.com/ref/abc123"
readonly style="padding-right: 80px;">
<button onclick="copyRefLink()">Копировать</button>
</div>
<script>
function copyRefLink() {
const link = document.getElementById('ref-link');
link.select();
document.execCommand('copy');
alert('Ссылка скопирована!');
}
</script>
Ограничения:
- Не предотвращает изменение значения через JavaScript
- В отличие от disabled, данные отправляются на сервер
- Внешний вид зависит от браузера
- Не работает для checkbox, radio и file
Примечание: Атрибут readonly полезен для отображения системной информации, которая должна быть видна и копируема, но не изменяема пользователем. Для лучшего UX сочетайте его с визуальными подсказками о статусе поля.