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

あなたが達成しようとしていると私が信じるものを与えると、タグでいくつかのより深いセマンティック属性を使用してデフォルト値を指定し、それを比較として使用します。

HTML:

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

Jクエリ:

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

于 2012-10-25T15:35:25.417 に答える
2

beという名前のブール変数 haschangedをフォーカス時に false に設定し、変更時に true に設定し、ぼかし時に 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

なぜ他の答えはとても複雑なのですか？（ここに何かが欠けていない限り）1行試してください：

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

これはあなたが探している機能ではありませんか？変更がある場合にのみ呼び出され、それ以外の場合は何も呼び出されません。したがって、最初にデフォルトの色を灰色にする必要があります。

于 2012-10-25T15:23:41.897 に答える
1

以下は、以前の値を入力のデータに保存し、ぼかし時にその値を探して比較します。また、jQuery の連鎖機能も利用します。毎回入力を思い出す必要はありません。

jsフィドル

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

ただし、他のサイトで見られるフォームにもっと似たものが必要な場合は、次のことを試してください。

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

jsフィドル

于 2012-10-25T15:24:55.117 に答える
0

このようなもの？

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 に答える