Как запретить ввод в input html

Атрибут readonly

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

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

HTML5 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Текстовое поле только для чтения

Примечание

Браузеры Firefox и Internet Explorer позволяют в поле для чтения установить курсор и выделять текст с помощью клавиатуры. Opera, Chrome и Safari допускают выделение только мышью.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Запрещаем ввод любых символов кроме цифр в input

Очень часто для полей нужно запретить ввод любых символов кроме цифр. Это мы сейчас и сделаем при помощи библиотеки jQuery.

После того, как вы подключите jQuery, используйте такой код:

$(function() < $(document).on("change keyup input click", "input[type='text']", function() < if(this.value.match(/[^0-9]/g))< this.value = this.value.replace(/[^0-9]/g, ""); >; >); >);

Здесь мы на события change , keyup , input и click вешаем проверку по регулярному выражению. Таким образом, при любом действии над input пользователь сможет ввести в поле только цифры.

3.67 6 голосов

Материалы по теме

9 февраля 2020 18:30:24

Рассмотрим два варианта как можно при помощи CSS обрезать длинный однострочный или многострочный текст.

13 июля 2018 15:23:52

При разработке лендингов (Landing Page) довольно часто можно увидеть плавный скролл (прокрутку) к блокам или элементам страницы. Так же, практически на любом сайте можно встретить зафиксированную на странице кнопочку, при клике на которую пользователь быстро возвращается в начало страницы. Сейчас мы и рассмотрим как делаются такие навороты.

HTML JS запретить ввод текста в INPUT

Есть input type text в который при определенных условиях нужно запретить ввод текста. Я знаю о существовании атрибута disabled но хотел бы узнать есть ли прямая альтернатива по аналогии к примеру с ссылкой: a href=»/» onclick=»return false;» то есть мы не добавляем ссылке никаких атрибутов или свойств, просто при клике «пропускаем переход». Возможно ли сделать такое же в input ? Чтобы он так же оставался enabled с мигающим индикатором, но при вводе текста чтобы просто ничего не происходило и значение не вписывалось.

Отслеживать
задан 20 авг 2018 в 8:34
1 1 1 золотой знак 1 1 серебряный знак 1 1 бронзовый знак
Чем атрибут readonly не угодил?
20 авг 2018 в 8:39
@andreymal мне не угодил disabled, а readonly про который я забыл то что надо, спасибо.
20 авг 2018 в 9:46

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Правильным решением будет использовать атрибут readonly , а не disabled и не скрипты:

Отслеживать
ответ дан 21 авг 2018 в 17:05
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака

Можно повесить обработчик событий, который будет «удалять» нативный функционал

const input = document.getElementById('input'); input.oninput = e => < e.target.value = ''; // не важно, что ввели, значение всегда пустое будет >

Как запретить ввод текста в поле input?

Есть поле input. Как сделать, чтобы в поле можно было ввести только цифры? Знаю, что можно наложить маску, но мне не нужно делать ограничение на количество вводимых цифр и не нужно делать маску плейсхолдера при клике на само поле.

Как решить такую задачу на чистом js без jquery? Всем спасибо за ответы

• Вопрос задан более трёх лет назад
• 1218 просмотров

3 комментария

Простой 3 комментария

WapSter @wapster92 Куратор тега JavaScript

Почему лезете в js когда не знаешь html? Блин формы это продающая часть сайтов, самая основная часть, вся наша работа устроена, чтобы сделать форму. Еще наш основной инструмент это поиск, и хорошо бы научиться им пользоваться.

вся наша работа устроена, чтобы сделать форму

Не говори за всех.

WapSter @wapster92 Куратор тега JavaScript

irishmann, у тебя в практике нет работы с клиентами никакой? Ни регистрации, ни поиска, и вообще никакого взаимодействия с пользовательскими данными и вводом. Если так то это очень редкое исключение из правил.