div内に入力フィールドがあり、入力フィールドにデータが入力されたときにdivの背景を変更したいと思います。
これはどのように行われますか?
この問題を解決するには、jQuery を使用してみてください。タグにjQuery をロードし、jQuery を<head>
含める下のスクリプト タグにこの JavaScript スニペットを追加して、入力フィールドの keypress イベントにアタッチします。
$(document).ready(function() {
$("#myInput").keypress(function() {
if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red");
});
});
$('div input').keypress(function() {
$(this).val().length > 0) {
$(this).parent().css("background-color","red");
} else {
$(this).parent().css("background-color","none");
}
});
Web デザイナーに親切にして友達になりたい場合は、クラス属性を動的に適用および削除することもできます。
$('div input').keypress(function() {
$(this).val().length > 0) {
$(this).parent().addClass("background");
} else {
$(this).parent().removeClass("background");
}
});
その後、デザイナーは CSS の「background」クラス フックを使用して、CSS ファイルのルック アンド フィールを調整できます。美しい JavaScript の傑作が台無しになることを心配する必要はありません。また、すべてのプレゼンテーション ロジックをビジネス ロジック コードに入れることなく、柔軟に変更を加えることができます。
/* Example CSS rule */
input.background {
background-color: red;
border-radius: 2px;
-webkit-box-shadow: 0 0 6px 4px red;
}