Блокировка ввода в текстовое поле без отключения: jQuery

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

Дабы запретить ввод текста в текстовое поле HTML, воспользуйтесь обработчиком события keydown и методом preventDefault из JavaScript:

document.querySelector('input[type="text"]').addEventListener('keydown', event => event.preventDefault());

Здесь при нажатии клавиши в поле, событие keydown срабатывает и запускает функцию, блокирующую стандартное действие браузера – ввод символов.

Инструменты контроля ввода

Использование HTML-атрибута readonly

В целях сохранения интерактивности поля примените атрибут readonly:

<input type="text" name="inputName" readonly>

Визуально readonly поля не похожи на отключенные, что поддерживает единый дизайн формы.

Подробнее об этом расскажет наш спикер на видео

Контроль с помощью JavaScript

Улучшите контроль над вводом путем использования jQuery для блокировки клавиш:

$('input[type="text"]').on('keydown', function(event) {
    event.preventDefault();
    // Вопрос: Почему нельзя ввести текст в это поле?
    // Ответ: Как бы оно говорит: "Извините, ввод текста здесь невозможен."
});

Такой подход гарантирует немедленное предотвращение ввода.

Ограничение длины текста с помощью HTML

Воспользуйтесь атрибутом maxlength, чтобы ограничить длину вводимого текста:

<input type="text" name="inputName" maxlength="0">

Это нестандартное решение, но при этом поле остается активным и не позволяет вводить текст.

Предотвращение выделения текста с помощью CSS

Для readonly полей дополнительно запретите выделение текста:

input[readonly] {
    user-select: none;
    /* Как бы говоря кодом "Не трогайте!" */
}

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

Рассмотрим аналогию, как можно прекратить ввод, оставив поле активным:

   🏺 <- Это ваше текстовое поле
🚫💧 <- Лить воду (ввод пользователя) в него нельзя

Ввод с клавиатуры блокирован, однако пользователь все еще может выделять и копировать содержимое, или отправлять его в форме — словно ваза полна, но крышка закрыта.

Было: 🏺✅💧 (Ввод допустим)
Стало: 🏺🚫💧 (Ввод заблокирован)

Учет скрин-ридеров

Использование readonly и запрет на ввод текста не мешают доступности поля для скрин-ридеров.

Ограничение операций вставки

Также предотвратите вставку данных:

<input type="text" onpaste="return false;">

Этот способ позволяет полностью контролировать содержимое поля.

Взаимодействие с формами

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

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

1. Событие "input" для элементов – Web API | MDN
2. Атрибут readonly для HTML – HTML: HyperText Markup Language | MDN
3. Обработка событий в DOM JavaScript
4. user-select | CSS-Tricks
5. KeyboardEvent – Web API | MDN
6. Введение в обработку событий
7. HTML Стандарт