0

我的页面上有 4 个文本框。我使用 jquery focus 和 blur 函数使文本框的默认出现和消失。我的代码： 

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