Question

I have the following code which on focus hides a “dummy” password field (containing the word ‘password’) and shows a real password input field. It works fine in all browsers expect IE.

In IE, it works if I tab to the password field, but if I click on the password field it focuses correctly but I can’t type into it.

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

Here’s a jsfiddle to show it in practice…

If I use .focus and .blur rather than .live it also works, but I need to use .live in this case.

EDIT: I’m using jquery 1.5.1 (minified version) though it seem to be the case on all subsequent versions too.

Answer 1

Probably not the answer you want but here it is anyway; Upgrade to the latest jQuery.

I tested this with your Jsfiddle and IE8. Using jQuery 1.5.2 I reproduced your problem. Using jQuery 1.6.3 it works as expected.

Horrible workaround, but appears to work:

$("#pass").show();
setTimeout(function(){$('#pass').focus()},10);

Live example: http://jsfiddle.net/etmrR/

I assume this has something to do with the textfield not being shown quick enough to be given the focus in IE.