Працюючи з формами, ми часто стикаємось з однією з найпоширеніших задач — "вимкнути" певний інпут із взаємодії з користувачем. Тобто ми хочемо, аби користувач бачив поле для вводу, але не міг змінити його значення.
І скоріш за все, перше, що спадає на думку, читаючи перші рядки — це атрибут
disabled. Бо саме так ми й звикли вирішувати це завдання. Просто й швидко, без зайвих роздумів.Однак, як виявляється, це не завжди правильне рішення. Справа в тому, що атрибут
disabled доволі радикальний, і не просто "вимикає" інпут, а радше робить його "вигнанцем". Дивіться самі:— Значення поля не потрапляє до FormData;
— Екранні читалки його попросту ігнорують;
— Інпут випадає з клавіатурної навігації;
— Інші події також перестають працювати.
Дещо надмірно, еге ж?
То що робити, якщо нам потрібно дійсно просто обмежити можливість редагувати значення поля, а не прирікати його сумно й самотньо дивитися із запилюченого вікна, поки усі інші елементи форми разом радісно граються надворі?
Рішення просте і, як виявилося, далеко не нове. На додачу до
disabled у інпутів є атрибут readonly, який робить саме те, що потрібно в більшості випадків: просто не дозволяє взаємодіяти зі значенням. Але усі інші взаємодії при цьому лишаються:— Поле лишається фокусованим;
— Значення буде додано до FormData;
— Скринрідери бачитимуть елемент і описуватимуть його відповідно, з оговіркою про неможливість редагування;
— Події працюють, як і зазвичай — focus, blur, click і так далі.
Також цей атрибут має супутній псевдоклас в CSS —
:read-only, дозволяючи стилізувати такий інпут у потрібний спосіб, не обмежуючи при цьому його доступність для документа.Як я зазначив дещо раніше, це геть не нова можливість. Вперше цей атрибут зʼявився ще 2004 року у Firefox!
Якщо підбити короткий підсумок, то видається очевидним, що для "вимикання" інпуту варто використовувати саме атрибут
readonly, особливо якщо це значення потрібно на бекенді.disabled же, по суті, лише за один крок від display: none, тож я би радив за можливості не користуватися ним для інпутів. Кнопки — безперечно так, а от щодо поля вводу — краще подумати ще раз. Ліпше вже видалити його з DOM, ніж прирікати на таку долю.🔗 MDN: readonly
Ану розкажіть, які причини, окрім того, що ви не знали про readonly, змушують вас і далі всюди розставляти disabled?
***
@babichdev
***
Пропоную разом із вогником або серденьком до цього допису додати ще й кілька гривень донату на Mavic для 184 навчального центру. Дякую всім і цьом вам у лобіка.
https://send.monobank.ua/jar/AeXQ6YRf2X
5375411202918178