Атрибут readonly тега <input> — тільки для читання
Атрибут readonly (HTML тега <input>) є логічним атрибутом, який вказує, що поле введення доступно тільки для читання.
Коли до елементу <input> додається атрибут readonly, текстове поле не можна змінюватися користувачем, в тому числі записувати новий текст або модифікувати існуючий.
Проте, стан і вміст поля можна міняти за допомогою скриптів, а також текст може бути виділений та скопійований користувачем.
Атрибут readonly може бути встановлений, щоб заборонити користувачеві змінювати значення до тих пір, поки деякі інші умови не були виконані (наприклад, потрібно вибрати прапорець, і т.д.). Тоді JavaScript можне видалити readonly , і зробити поле input доступним для редагування.
Загальний опис
автор: NagarD
Синтаксис
<input readonly>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута readonly теґа <input>
HTML
<p>Напишіть своє місто в текстовому рядку, натиснувши на кнопку "Розблокувати"</p>
<input type="text" class="b1" id="myText" name="" value="Тернопіль" readonly="readonly"/><br/><br>
<div id="sales"><input type="submit" value="Розблокувати" onclick="buy()" /></div>CSS
#sales{
color:red;
}JS
var sales_1 = document.getElementById("sales");
function buy() {
document.getElementById('myText').readOnly = false;
sales.innerHTML = '<input type="submit" value="Заблокувати поле" onclick="cancel()" /> Поле розблоковане! Змініть назву міста! ';
}
function cancel() {
document.getElementById('myText').readOnly = true;
sales.innerHTML = '<input type="submit" value="Розблокувати" onclick="buy()" />';
}
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута readonly теґа <input>
HTML
<form>
<p>З використанням атрибута readonly</p>
<p>Введіть свої дані:</p>
Ім'я: <input type = "text" class="a1" name = "name" value = "Іван" readonly><br> <br>
Прізвище: <input type = "text" class="a2" name = "lastname" value = "Іванов" readonly><br> <br>
Адреса: <input type = "text" class="a3" name = "address" value = "Київська" readonly><br><br>
<button type = "submit">Надіслати</button>
</form>
<br>
<form>
<p>Без використання атрибута readonly</p>
<p>Введіть свої дані:</p>
Ім'я: <input type = "text" name = "name" value = "Іван"><br> <br>
Прізвище: <input type = "text" name = "lastname" value = "Іванов" ><br> <br>
Адреса: <input type = "text" name = "address" value = "Київська" ><br><br>
<button type = "submit">Надіслати</button>
</form>CSS
.a1{
color:grey;
}
.a2{
color:grey;
}
.a3{
color:grey;
}Три поля поспіль. У readonly текст виділяється й копіюється, поле бере фокус. У disabled — нічого з переліченого. А прапорець із readonly перемикається як звичайний: на нього атрибут не діє взагалі.
HTML
<form>
<label>readonly
<input name="a" size="28" value="Виділіть і скопіюйте мене" readonly></label>
<label>disabled
<input name="b" size="28" value="Не виділяється й не їде" disabled></label>
<label><input type="checkbox" checked readonly>
checkbox з readonly — спробуйте клацнути</label>
</form>CSS
label { display: block; margin-bottom: 12px; }
input:read-only { background: #f7f7f7; border: 1px solid #bbb; }
input:disabled { background: #ececec; color: #999; border: 1px solid #ddd; }Коментарі
Коментарів ще немає — будьте першим!