Question

I have input with password type. And I want to do simple thing. If input isn’t in focus, input has default value. I try to do it with jQuery.
My HTML:

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

My 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);
        }
    });
});

All work nice. But only one time. When I click first time input become empty, when I blur input have default value.
But If I click third time nothing happen. What is wrong? Or maybe there are better ways to do this?

Answer 1

Here’s one way roughly as you described it, inserted inside $(function() { ... }); of course (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();
        }
    });
});

Possibly better is to overlay a label on top of the text box (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();
        }
    });

There’s a jQuery plug-in that implements the latter approach more nicely.