プレースホルダーを除いてテキスト入力の背景を変更する

Question

ユーザーがテキストを入力したときに入力背景色を変更したいが、入力にもプレースホルダーがあり、色を変更したくないプレースホルダの内容のみ。

純粋なJavascriptを使用してどのように達成できますか？

<input type="text" placeholder="Enter your email adress"> 

if (formInput.length > 0) { 
    formInput[0].style.backgroundColor = "#f9f9f9"; 
} 

asこれは、ページの読み込み時にプレースホルダを使用しても背景色が変わると想像することができます。

Answer 1

は、入力値の長さを確認してください。また、入力に何も入っていないときは、色をリセットしてください。

（色はより明白であることを赤に変更）

let input = document.querySelector('input'); 
 

 
input.addEventListener('input', function() { 
 
    this.style.backgroundColor = (this.value.length > 0) ? 'lightcoral' : ''; 
 
});

<input type="text" placeholder="Enter your email adress">

Answer 2

これはあなたの探しているものですか？

el =document.getElementById("email"); 
 
el.onkeyup = function(evt) { 
 
    el.style.background="red"; 
 
    if(el.value.length==0) 
 
     el.style.background="none"; 
 
};

<input type="text" placeholder="Enter your email adress" id="email">

Answer 3

単に入力の値を確認します

let input = document.querySelector("input"); 
 
input.addEventListener("input", function() { 
 

 
    if (input.value.length > 0) 
 
    input.style.background = "#ff0000"; 
 
    else 
 
    input.style.background = "none"; 
 
})

<input type="text" placeholder="Enter your email adress">