Question

我正试图控制长形的颜色。我希望焦点（已经完成）和模糊的输入颜色更改仅在用户进行了更改时。有可能吗？

$(function(){

    $('input').css("color", "grey"); //initial value

    $("input").focus(function () {
        $(this).css("color", "black");
    });

    $("input").blur(function () {
        // if it changed $(this).css("color", "black");                   
        // if it nas NOT changed $(this).css("color", "grey");
    });

});

Answer 1

给出我相信你想要实现的东西，我会在标签上使用一些更深层次的语义属性，指定默认值，然后将其用作比较：

HTML：

<form id="form1">
    <input type="text" value="name" data-default="name" />
    <input type="text" value="mail" data-default="mail" />
</form>

JQUERY：

$(function(){

    $('input').css("color", "grey"); //initial value

    $("input").focus(function () {
        $(this).css("color", "black"); // or "red" if I understood correctly what you want to do
    });

    $("input").blur(function () {
        if ($(this).val() != $(this).data('default'))     
            $(this).css("color", "black");   
        else                
            $(this).css("color", "grey");
    });   
});

小提琴：http://jsfiddle.net/pEqvK/8/

Answer 2

在焦点上将名为haschanged的布尔变量设置为false，在更改时设置为true，并检查模糊的真实性。

$(function(){
    var haschanged = false;  //stores changed state since focus

    $('input').css("color", "grey"); //initial value

    $("input").focus(function () {
        haschanged = false;
        $(this).css("color", "black");
    });

    $("input").change(function () {
        haschanged = true;
    });

    $("input").blur(function () {
        if(haschanged) $(this).css("color", "black");                   
        else           $(this).css("color", "grey");
    });

});

Answer 3

为什么其他答案如此复杂？（除非我在这里遗漏了一些东西）尝试一行：

$("input").change(function() { $(this).css("color", "black"); // or set some boolean }

这不是你要找的功能吗？只有在发生变化时才会调用它，否则不会调用任何内容。所以你想首先将颜色默认为灰色。

Answer 4

以下内容会将之前的值保存到输入数据中，然后查找并在模糊时比较该值。它还利用了jQuery的链接能力。您不必每次都记得输入。

jsFiddle

$('input').css("color", "grey")
    .focus(function () {
        $(this).css("color", "black")
            .data("prevValue", $(this).val());
    })
    .blur(function () {
        if ($(this).val() == $(this).data("prevValue")) $(this).css("color", "grey");
    });

HOWEVER 如果您想要更像您在其他网站上看到的表单，可以尝试以下方法：

$(function(){
    $('input').css("color", "grey")
        .each(function(i) { $(this).data("baseValue", $(this).val()) })
        .focus(function(e) {
            $(this).css("color", "black");
            if ($(this).val() == $(this).data("baseValue")) $(this).val("");
        })
        .blur(function(e) {
            if ($(this).val() == "") $(this).css("color", "grey").val($(this).data("baseValue"));
        });
})

jsFiddle

Answer 5

这样的东西？

http://jsfiddle.net/pEqvK/5/

JS

$(function(){

    $('input').css("color", "grey"); //initial value

    var t1;
    var t2;

    $("input").focus(function () {
        t1 = $('#t1').val();
        t2 = $('#t2').val();
        $(this).css("color", "black");
      }).blur(function () {
        // if it changed $(this).css("color", "black");                      
        // if it nas NOT changed $(this).css("color", "grey");
        if($(this).attr('id')=='t1'&&$('#t1').val()==t1) {
            $(this).css("color", "grey");
        }
        if($(this).attr('id')=='t2'&&$('#t2').val()==t2) {
            $(this).css("color", "grey");
        }
      });

});

改变颜色，重点关注变化时的模糊

5 个答案:

jsFiddle

jsFiddle