-2

I have an input field inside a div, and I would like the div background to change when the input field has data typed inside.

How is this done?

4

2 回答 2

2

你可以尝试使用 jQuery 来解决这个问题。<head>通过在包含 jQuery .

$(document).ready(function() {
    $("#myInput").keypress(function() {
        if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red");
    });
});
于 2012-04-08T04:42:26.917 回答
0 
$('div input').keypress(function() {
    $(this).val().length > 0) {
        $(this).parent().css("background-color","red");
    } else {
        $(this).parent().css("background-color","none"); 
    }
});

如果您想善待您的网页设计师并与他们交朋友，您还可以动态应用和删除类属性：

$('div input').keypress(function() {
    $(this).val().length > 0) {
        $(this).parent().addClass("background");
    } else {
        $(this).parent().removeClass("background");
    }
});

然后，您的设计师可以使用 CSS“背景”类挂钩调整 CSS 文件中的外观和感觉，而不必担心弄乱您美丽的 JavaScript 杰作。它还为他们提供了更大的灵活性来进行更改，而无需将所有表示逻辑放入您的业务逻辑代码中。

/* Example CSS rule */
input.background {
    background-color: red;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 6px 4px red;
}
于 2012-04-08T04:42:51.257 回答