Question

我在div中有一个输入字段，我想在输入字段内部输入数据时更改div背景。

这是怎么做到的？

Answer 1

您可以尝试使用jQuery来解决此问题。在您的<head>标记中加载jQuery，并通过在包含jQuery的脚本标记中添加此javascript代码段来附加到输入字段上的keypress事件。

$(document).ready(function() {
    $("#myInput").keypress(function() {
        if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red");
    });
});

Answer 2

$('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;
}

当INPUT字段有数据时更改DIV背景。怎么样？

2 个答案: