入力フィールドにコンテンツを設定した後で背景色を追加する

Question

入力フィールド内にコンテンツを配置した後に背景色を追加する方法はありますか？オートコンプリートが動作したときと同じように。

ありがとうございます！

Answer 1

jqueryのを使用してHTML

​​3210

のCss

input:focus { 
     background-color: yellow; 
    } 

Demo in JsFiddle

Answer 2

0123ここで

DEMO

Answer 3

純粋なJavaScriptを使用してソリューション

var input = document.getElementById("test"); 
 
input.addEventListener('input', function() { 
 
    if (input.value) 
 
    input.style.backgroundColor = '#90EE90'; 
 
    else 
 
    input.style.backgroundColor = '#fff'; 
 
});

<input id="test" type="text" value="">

Answer 4

は今、あなたはこれを追加ぼかし機能にjqueryのを使用して

.myCSSClass 
{ 
background-color:red; 
} 

のようなCSSクラスを追加していますクラス

$("#myTextBox").on('blur',function(){ 
if($("#myTextBox").val()==""){ 
    if($("#myTextBox").hasClass("myCSSClass")){ 
    $("#myTextBox").removeClass("myCSSClass"); 
    } 
} 
else 
{ 
$("#myTextBox").addClass("myCSSClass") 
} 
}); 

Answer 5

これを達成する方法はいくつかあります。 required attributeを追加してinputを必須にすることができます。これを実行するとすぐにユーザーがフィールドには何も入って、それが有効な状態になり、あなたが:valid pseudo-classを使用して、あなたのCSSでそれを標的にすることができることを意味します

input:valid{ 
 
    background:#ff9; 
 
}

<input required>

あるいは、もしフィールドを必須にしたくない場合は、フィールドがフォーカスを受け取ったときに新しいbackground-colorを設定することができます。フォーカスが失われたときに元の色に戻らないようにするには、backgroundにtransition-delayを追加する必要があります。これは、inputが通常の状態になっているときにかなり高い数値に設定し、フォーカスしたときに0sにリセットします。 。ただし、ユーザーが実際にフィールドに何かを入力するかどうかにかかわらず、この変更が発生することは明らかです。

input{ 
 
    transition-delay:9999s; 
 
    transition-property:background; 
 
} 
 
input:focus{ 
 
    background:#ff9; 
 
    transition-delay:0s; 
 
}

<input>

これらのオプションのどちらも、あなたのニーズに合うなら、あなたはおそらくinputのvalueが空であるか否かに応じて、クラスを追加または削除するにはJavaScriptを使用してに頼る必要があります。 。

document.querySelector("input").addEventListener("input",function(){ 
 
    this.value?this.classList.add("filled"):this.classList.remove("filled"); 
 
},0);

.filled{ 
 
    background:#ff9; 
 
}

<input>