JavaScript (JS) является одним из наиболее популярных языков программирования, используя который можно создавать динамические и интерактивные веб-сайты. В этой статье мы рассмотрим, как изменить цвет фона поля ввода с помощью JS.
HTML-разметка
Для начала, нам понадобится создать HTML-разметку, которая содержит поле ввода:
<!DOCTYPE html>
<html>
<head>
<title>Change input background color with JS</title>
</head>
<body>
<label for="input">Enter text:</label>
<input type="text" id="input" name="input" />
</body>
</html>
Мы создали простую HTML-страницу со входным полем, которое имеет идентификатор “input”.
JavaScript-код
Теперь, когда у нас есть HTML-разметка, мы можем написать JavaScript-код, который изменит цвет фона поля ввода при взаимодействии с ним.
// выбираем поле ввода
const input = document.getElementById("input");
// добавляем слушатель события на поле ввода
input.addEventListener("focus", function() {
// изменяем цвет фона поля ввода при фокусировке на нем
input.style.backgroundColor = "yellow";
});
// добавляем слушатель события на поле ввода
input.addEventListener("blur", function() {
// изменяем цвет фона поля ввода при потере фокуса
input.style.backgroundColor = "white";
});
В коде выше мы выбрали поле ввода по его идентификатору, добавили на него два слушателя событий – focus и blur. При фокусировке на поле ввода мы изменяем цвет его фона на желтый, а при потере фокуса – обратно на белый.
Вывод
Мы посмотрели, как изменить цвет фона поля ввода с помощью JavaScript. Это простой, но полезный способ улучшить взаимодействие пользователя с сайтом. Вы можете использовать эту технику в любом проекте, где требуется взаимодействие с формами и полями ввода.
Вот и все! Надеюсь, эта статья была полезной для вас. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь задавать их в комментариях.
