jQuery 模糊/焦点奇怪的情况

Question

我输入了密码类型。我想做简单的事情。如果输入未获得焦点，则输入具有默认值。我尝试用 jQuery 来实现。 我的 HTML：

<input type="password" name="password" id="password" defvalue="password" class="filling-password">

我的 Javascript(jQuery)：

$('.filling-password').each(function(){
    var b = $(this);
    var id = this.id;
    var val = b.attr("defvalue");
    var textInput = '<input id="'+id+'-text" type="text" value="'+val+'">';
    $(textInput).insertAfter(this);
    b.hide(0);
    $("#"+id+"-text").focus(function(){
        $(this).hide(0);
        b.show(0).focus();
    });
    b.blur(function(){
        if ($(this).val() == "") {
            $(textInput).insertAfter(this);
            b.hide(0);
        }
    });
});

一切都很好。但只有一次。当我第一次点击输入时，输入变为空，当我模糊输入时，输入有默认值。
但如果我第三次点击什么也不会发生。怎么了？或者也许有更好的方法来做到这一点？

Answer 1

这是一种大致如您所描述的方法，插入 $(function() { ... }); 当然（现场演示）：

$('.filling-password').each(function() {
    var pass = $(this),
        text = $('<input type="text"/>').val(pass.attr('defvalue'));

    text.insertBefore(pass).focus(function() {
        text.hide();
        pass.show().focus();
    });

    pass.hide().blur(function() {
        if (pass.val() == '') {
            pass.hide();
            text.show();
        }
    });
});

可能更好的方法是在文本框顶部覆盖一个标签（现场演示)：

$('.filling-password').each(function() {
    var pass = $(this),
        div = pass.wrap('<div/>').parent(),
        label = $('<label/>').attr('for', pass.attr('id')).text(pass.attr('defvalue')).prependTo(div);

    div.css({
        display: 'inline',
        position: 'relative'
    });

    label.css({
        color: '#666',
        fontSize: '12px',
        position: 'absolute',
        left: '4px',
        bottom: '2px'
    });

    pass.focus(function() {
        label.hide();
    }).blur(function() {
        if(pass.val() == '') {
            label.show();
        }
    });

有一个 更好地实现后一种方法的 jQuery 插件。

Answer 2

我不知道 jQuery，但判断你的代码，这就是你想要的方向：

$('.filling-password').each(function(){

    var value = $(this).attr('value');
    var defaultvalue = 'password';


    $(this).blur(function() {

        if($(this).val() === '') $(this).value = defaultvalue;
    });


    $(this).focus(function() {

         if($(this).val() === defaultvalue) $(this).value = '';
    });
});

对于 HTML，defvalue 属性无效，我相信：

<input type="password" name="password" id="password" value="password" class="filling-password">