1

我正在尝试控制长表格的颜色。我希望输入颜色改变焦点（已经完成）和模糊只有当用户做出改变时。是否可以？

我有这个例子可以玩：http: //jsfiddle.net/pEqvK/

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

});
4

5 回答 5

3

Giving what I believe you are trying to achieve, I would use some deeper semantic attributes on the tag, to specify the default value and then use that as a comparison:

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");
    });   
});​

Fiddle: http://jsfiddle.net/pEqvK/8/

于 2012-10-25T15:35:25.417 回答
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");
    });

});
于 2012-10-25T15:23:51.640 回答
1

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

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

这不是您要找的功能吗？只有在发生变化时才调用它，否则什么都不调用。因此，您首先希望将颜色默认为灰色。

于 2012-10-25T15:23:41.897 回答
1

The following will save the previous value to your input's data then look for and compare that value upon blur. It also makes use of jQuery's chaining ability. You don't have to recall input everytime.

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 If you want something more like the forms you see on other sites, you might try the following:

$(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

于 2012-10-25T15:24:55.117 回答
0

Something like this?

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");
        }
      });

});​
于 2012-10-25T15:26:31.797 回答