Question

我有一个表单，其中输入元素最初是淡蓝色，我想要以下内容： a）当你专注于它们时，它们会变成白色 b）当你模糊它们时，它们只有在内容被改变时才会恢复原来的蓝色。

我有以下代码：

$(":text, select, textarea").change(function() {    
                        $(this).css("background-color", "white");
                    });
                    $(":text, select, textarea").blur(function() {  
                        $(this).css("background-color", "white");
                    });

这不起作用，因为.blur覆盖了.change并且无论输入是否被更改都变回蓝色。我怎样才能避免这种情况并完成我想要做的事情？我弄明白的唯一方法是取出模糊并使用css：焦点使其在聚焦时变为白色（并且.change在离开焦点时处理它），但问题是：焦点不适用于IE7，我想这样做。有什么想法吗？

Answer 1

更改是在值更改时，而不是焦点。你想要吗：

$(":text, select, textarea").focus(function() {    
    $(this).css("background-color", "white");
});

$(":text, select, textarea").blur(function() {    
    $(this).css("background-color", "blue");
});

代替？

Answer 2

首先，您应该使用focus代替change。其次，只有在值发生变化时才将原始背景更改为蓝色，您需要将旧值存储在变量中。然后，当元素模糊时，再次检查该值并查看它是否与旧元素匹配。如果没有，请更改背景颜色。

查看javascript代码。

http://jsfiddle.net/rsqqL/1/

Answer 3

上述两个答案都没有达到我的要求。对于它们两者，如果我从输入框中单击，它会变成蓝色，无论我是否有任何输入。但是，我修改了最后一个答案并得到了我需要的结果：

$(":text, select, textarea").focus(function() {    
$(this).css("background-color", "white");
$(this).blur(function(){
    var newVal = $(this).val();
    if (newVal == '')
    {
        $(this).css("background-color", "blue");
    }
    else
        { $(this).css("background-color", "white");
    }    
});
});

jquery。由.blur覆盖

3 个答案: