0

ページに 4 つのテキストボックスがあります。jquery のフォーカス関数とブラー関数を使用して、テキスト ボックスのデフォルトを表示および非表示にしました。私のコード: 

$(document).ready(function() {

$("#name").focus(function() {
    $("#name").removeClass("idleField").addClass("focusField");
    if($("#name").val() == "username") {
        $("#name").val('');
    }
});

$("#name").blur(function() {
    $("#name").removeClass("focusField").addClass("idleField");
    if($("#name").val().length == 0) {
        $("#name").val('username');
    }
});

$("#password").focus(function() {
    $("#name").removeClass("idleField").addClass("focusField");
    if($("#password").val() == "password") {
        $("#password").val('');
    }   
});

$("#password").blur(function() {
    $("#name").removeClass("focusField").addClass("idleField");
    if($("#password").val().length == 0) {
        $("#password").val('password');
    }
});

$("#firstname").focus(function() {
    $("#firstname").removeClass("idleField").addClass("focusField");
    if($("#firstname").val() == "firstname") {
        $("#firstname").val('');
    }
});

$("#firstname").blur(function() {
    $("#firstname").removeClass("focusField").addClass("idleField");
    if($("#firstname").val().length == 0) {
        $("#firstname").val('firstname');
    }
});

$("#lastname").focus(function() {
    $("#lastname").removeClass("idleField").addClass("focusField");
    if($("#lastname").val() == "lastname") {
        $("#lastname").val('');
    }   
});

$("#lastname").blur(function() {
    $("#lastname").removeClass("focusField").addClass("idleField");
    if($("#lastname").val().length == 0) {
        $("#lastname").val('lastname');
    }
});

$("#email").focus(function() {
    $("#email").removeClass("idleField").addClass("focusField");
    if($("#email").val() == "username@example.com") {
        $("#email").val('');
    }
});

$("#email").blur(function() {
    $("#email").removeClass("focusField").addClass("idleField");
    if($("#email").val().length == 0) {
        $("#email").val('username@example.com');
    }
});

});

私はここで何か間違ったことをしていますか?

どんな助けでも大歓迎です！

4

1 に答える 1

1

#passwordあなたがまだ#nameセレクターとして持っているフィールドに間違いがあります。

また、これを別の方法で処理することをお勧めします。たとえば、元の値を必要とする各要素のデータ属性として保存し、それらすべてにイベント ハンドラーをアタッチして、要素のデータ属性を現在のものと照合します。価値...

このようなHTMLを想定して...

<input type='text' id='name' data-init='first name'>
<input type='text' id='age' data-init='your age'>

このようなjQueryは機能します...

// select all the elements to operate on
$("#name,#age").each(function(){
    $me = $(this) // cache the current jQuery object for better performance
    $me.val($me.data('init')) // set the val to the data object of each element
}).focus(function(){ // handle focus for all elements
    $me = $(this)
    $me.removeClass('idleField').addClass('focusField')
    if($me.val() == $me.data('init'))
        $me.val('')
}).blur(function(){ // handle blur for all emements
    $me = $(this)
    $me.removeClass('focusField').addClass('idleField')
    if($me.val().length == 0)
        $me.val($me.data('init'))
})
于 2012-07-01T11:28:03.690 に答える