Добавление атрибута "readonly" к элементу <input> в jQuery

Быстрый ответ

Для того чтобы сделать поле ввода <input> доступным исключительно для чтения, нужно использовать атрибут readonly.

HTML-код выглядит так:

<input type="text" readonly>

JavaScript-код будет таков:

document.querySelector('input').readOnly = true;

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

Динамические атрибуты: овладеваем переключениями

В определённых случаях может возникнуть необходимость изменять атрибут readonly в поле <input> в зависимости от логики работы приложения.

С использованием JavaScript:

// Включаем режим чтения. Развлечения окончены!
document.querySelector('#targetInput').readOnly = true;

// Переходим в режим редактирования. Возвращаемся к работе!
document.querySelector('#targetInput').readOnly = false;

С использованием jQuery:

// Для jQuery версии 1.9 и выше:
$('#targetInput').prop('readonly', true);

// Возвращаем возможность редактирования. Вечеринка продолжается!
$('#targetInput').prop('readonly', false);

// Если используется версия jQuery ниже 1.9:
$('#targetInput').attr('readonly', 'readonly');
$('#targetInput').removeAttr('readonly');

Почему же предпочтительнее использовать .prop, а не .attr? Метод prop() возвращает значения свойств для первого элемента в выборке, а при обращении к несуществующему свойству — undefined. В то время как attr() всегда извлекает значение атрибута.

Безошибочный путь: как избежать промахов

Чтобы минимизировать вероятность ошибок в коде, не забывайте:

• Убедиться в правильности написания селекторов. Для ID лучше всего использовать селектор с символом решётки (#targetInput).
• Понимать, что атрибут readonly позволит отправить значение поля в форму, в отличие от атрибута disabled.
• Следить за правильностью синтаксиса: корректно пишется .prop('readonly', true), а не .prop('readOnly', true).

Особенности элемента с атрибутом "readonly"

Работая с полями, доступными только для чтения, не забывайте об особенностях:

Поведение при отправке формы: Значение из поля с атрибутом readonly будет отправлено вместе с формой, в отличие от полей, помеченных как disabled.

Стилизация CSS:

input[readonly] {
  background-color: #e9ecef;
  color: #495057;
}

Такое форматирование облегчает восприятие и улучшает внешний вид поля.

Доступность: Проконтролируйте, чтобы вспомогательные технологии могли распознавать поля, доступные только для чтения. Это сделает ваше приложение более включающим и доступным.

Безопасность: Нельзя полагаться на readonly как на средство защиты конфиденциальных данных — ограничения, установленные на стороне клиента, могут быть обойдены.

Визуализация

Установка режима readonly для поля <input> аналогична тому, как бы вы повесили табличку "Тише пожалуйста" на дверь библиотеки:

🚪 Дверя открыты: [Добро пожаловать]   // Ввод доступен (поле редактируемо)
🤫 Режим чтения: [Тише пожалуйста]     // Библиотека с призывом к тишине (атрибут readonly)

Как мы вешаем символическую табличку при помощи JavaScript:

// Включаем режим чтения
document.querySelector('input').readOnly = true;

До и после активации режима "Только чтение":

До: <input value="Введите текст">
После: <input value="Только чтение" readonly>

Текст (значение) остаётся видимым, однако ввод новых данных (редактирование) становится невозможным.

Единственное постоянство – это "изменение": выбор между jQuery и Vanilla JS

Выбор между jQuery и нативным JavaScript может стать сложной задачей:

• Если ваш проект ориентирован на использование jQuery, логично продолжать вызовы к DOM с его помощью.
• Однако для простых задач или проектов где критична производительность, нативный JavaScript может быть быстрее и более эффективным.

Помните: последовательность в коде поможет избежать путаницы при будущей отладке.

Полезные материалы

1. API jQuery – метод .prop() — взаимодействие со свойствами в jQuery.
2. HTML input readonly attribute — руководство по использованию атрибута readonly.
3. HTML формы: readonly для элементов SELECT / INPUT – Stack Overflow — практические советы и обсуждения.
4. Свойства и методы элементов форм – JavaScript.Info — подробный обзор работы с формами через JavaScript.
5. HTML Standard – readonly attribute — официальный стандарт атрибута readonly.