Блог

Главная - Вопросы по программированию - изменить цвет фона ввода, если он пустой

изменить цвет фона ввода, если он пустой

#javascript #html #input #background-color

#javascript #HTML #ввод #background-color

Вопрос:

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

Вот мой HTML:

 <div id="name">
<label>Name<sup></sup></label> <br>
    <input id="first" style="font-size:11pt;" type="text" name="name" placeholder="First Name" onChange='emptyField("first")'/>
    <input id="last" style="font-size:11pt;" type="text" name="name" placeholder="Last Name" onChange='emptyField("last")'/> 
</div>

Вот моя программа на javascript:

 function emptyField(x) {
var field = document.getElementById(x);

if(field !== ""){
    field.style.backgroundColor = "white";
}
else {
    field.style.backgroundColor = "red";
}}

Просто чтобы упомянуть, я только начал изучать HTML, CSS, JS и PHP. Так что, надеюсь, это не слишком сложно для меня, чтобы понять.

Ответ №1:

Вот рабочий пример. Обратите внимание на использование focusout события, а не change :

 document.querySelectorAll('input[type="text"]').forEach(e => {
  e.addEventListener('focusout', setInputBackground)
});

function setInputBackground() {
  this.style.backgroundColor = !!this.value ? "white" : "red";
} 
 <div id="name">
  <label>Name<sup></sup></label> <br>
  <input id="firstname" style="font-size:11pt;" type="text" name="firstname" placeholder="First Name" />
  <input id="lastname" style="font-size:11pt;" type="text" name="lastname" placeholder="Last Name" />
</div>

Ответ №2:

Вы должны использовать событие onblur (), чтобы вывести фокус из поля ввода и проверить значение поля.

HTML:

 <div id="name">
<label>Name<sup></sup></label> <br>
    <input id="first" style="font-size:11pt;" type="text" name="name" placeholder="First Name" onblur='emptyField("first")'/>
    <input id="last" style="font-size:11pt;" type="text" name="name" placeholder="Last Name" onblur='emptyField("last")'/> 
</div>

JAVASCRIPT:

Чтобы получить значение поля, вам нужно написать field.value , а не просто field ,

 function emptyField(x) {
    var field = document.getElementById(x);
    
    if(field.value !== ""){
        field.style.backgroundColor = "white";
    }
    else {
        field.style.backgroundColor = "red";
    }}
Метки: ,