Question

I have some textboxes which I want to hide and then show on focus but it doesn’t seem to be working properly

Here’s my jQuery

$("#txt1").live('focus', function() {
    $(this).hide();
    $("#txt2").show().focus();
});

$("#txt2").live('blur', function() {
    if ($(this).attr("value") == "") {
        $(this).hide();
        $("#txt1").show();
    }
});

And here’s my HTML

<input type="text" id="txt1" value="Test" />

<input type="password" style="display:none" id="txt2" />

The problem is that in Internet Explorer the live focus function doesn’t work as expected.

It puts focus on my text box but won’t enable me to type in the box unless I click it again.

I have an example here on jsFiddle

The first Test is the one that is the problem.

I added in the second one which works as expected but I need it to work using the live function.

Any ideas?

Answer 1

I solved the problem by doing this

function pageLoad() {

$("#txt1").focus(function() {
    $(this).hide();
    $("#txt2").show().focus();
});

$("#txt2").blur(function() {
    if ($(this).attr("value") == "") {
        $(this).hide();
        $("#txt1").show();
    }
});

};

Instead of having it in the document.ready()