Question

我的页面上有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');
    }
});

}）;

我在这做错了吗？

任何帮助都会被贬低！

Answer 1

#password字段中存在错误，您仍然有#name作为选择器。

另外，最好以不同方式处理它，例如，我将原始值存储为需要一个元素的每个元素的数据属性，然后将事件处理程序附加到所有元素，这将检查元素＆＃39 ; s数据属性反对它的当前值......

假设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'))
})

谷歌jquery api - 如何在文本框上使用焦点功能和模糊功能？

1 个答案: