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() { ... });内live demo}：

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

可能更好的方法是在文本框顶部叠加标签（live demo）：

$('.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 plug-in that implements the latter approach更好。

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">

jQuery模糊/焦点奇怪的情况

2 个答案: