При создании формы или анкеты требуется подсказка пользователю в определенный момент при заполнении поля ввода. Например, ограничение количества символов в поле, например «Контактный номер». Кроме того, для применения предварительного условия для заполнения определенного поля и т. д. В таких сценариях включение/отключение полей ввода в JavaScript является очень удобным подходом как для разработчика, так и для пользователя.
В этом руководстве объясняются подходы к включению/отключению полей ввода с помощью JavaScript.
Как включить/отключить поля ввода с помощью JavaScript?
Чтобы включить/отключить поля ввода с помощью JavaScript, можно использовать следующие подходы в сочетании со свойством «отключено»:
- Событие «onclick».
- Метод addEventListener().
Подход 1: включение/отключение полей ввода с помощью JavaScript с использованием события onclick
Событие onclick используется для перенаправления на указанную функцию. Это событие может быть применено для вызова соответствующей функции для включения и отключения полей ввода при нажатии кнопки.
Пример
Давайте посмотрим на приведенный ниже пример:
<body>
<h2>Enable/Disable Text Field</h2>
<input type= "text" id = "input" placeholder= "Enter Text..." >
<br>
<br>
<button onclick="enableField()">Click to Enable Text Field</button>
<button onclick="disableField()">Click to Disable Text Field</button>
</body>В приведенном выше коде выполните следующие шаги:
- Включите поле ввода «текст» с указанными значениями «id» и «заполнитель».
- Кроме того, создайте две отдельные кнопки с прикрепленными событиями «onclick», перенаправляющими на две разные функции для включения и отключения полей ввода соответственно.
Перейдем к части кода JavaScript:
<script type="text/javascript">
function disableField(){
let get= document.getElementById("input")
get.disabled = true;
}
function enableField(){
let get= document.getElementById("input")
get.disabled = false;
}
</script>В приведенном выше фрагменте кода выполните следующие шаги:
- Объявите функцию с именем «disableField()».
- В его определении получить доступ к созданному полю ввода по его «id», используя метод «document.getElementById()».
- На следующем шаге примените свойство «disabled» и присвойте ему логическое значение «true». Это приведет к отключению поля ввода при нажатии кнопки.
- Точно так же определите функцию с именем «enableField()».
- В его определении аналогичным образом повторите шаг, рассмотренный для доступа к полю ввода.
- Здесь присвойте свойству «disabled» значение «false». Это приведет к включению отключенного поля ввода.
Выход
В приведенном выше выводе видно, что поле ввода отключено и включено правильно при нажатии соответствующей кнопки.
Подход 2: включение/отключение полей ввода с помощью JavaScript с использованием метода addEventListener()
Метод «addEventListener()» используется для прикрепления события к элементу. Этот метод может быть реализован для отключения и включения поля ввода на основе прикрепленного события и указанного «ключа».
Синтаксис
element.addEventListener(event, function, use)
В приведенном выше синтаксисе:
- «event» относится к названию события.
- «function» указывает на функцию, которую необходимо выполнить.
- «use» — необязательный параметр.
Пример
Рассмотрим приведенный ниже пример:
<body>
<h2>Enable/Disable Text Field</h2>
<input type="text" id="input" placeholder="Enter Text...">
</body>В приведенных выше строках кода:
- Включите указанный заголовок.
- На следующем шаге повторите метод, описанный в предыдущем подходе, для включения поля ввода с указанными значениями «id» и «placeholder».
Давайте перейдем к части кода JavaScript:
<script type="text/javascript">
let get= document.getElementById("input")
get.addEventListener("keydown", (e) => {
if(e.key == ""){
get.disabled = false
} else if(e.key == "Enter") {
get.disabled = true
}
})
</script>В приведенном выше фрагменте кода выполните следующие шаги:
- Получите доступ к полю ввода по его «id», используя метод «document.getElementById()».
- На следующем шаге примените метод «addEventListener()» и прикрепите событие с именем «keydown».
- В дальнейшем коде присвойте свойству disabled значение false для включения поля ввода.
- Наконец, в условии «false» присвойте свойству «disabled» значение «true» для отключения включенного поля ввода при нажатии клавиши «Ввод».
Выход
Из приведенного выше вывода видно, что поле ввода отключается при нажатии клавиши «Ввод».
Свойство disabled в сочетании с событием onclick или методом addEventListener() может применяться для включения/отключения полей ввода с помощью JavaScript. Первый подход можно использовать для перенаправления на соответствующую функцию для включения/отключения поля ввода при нажатии кнопки. Последний подход может быть реализован для выполнения требуемой функциональности на основе прикрепленного события и указанного «ключа». В этой статье объясняется, как включить/отключить поля ввода в JavaScript.
