jQuery.replaceWith() on input field and regaining focus in IE

Question

There is a script

http://gist.github.com/457324

that sets default text (taken from element's title attribute) for empty input[type=text] and input[type=password] elements.

For password elements it is not that trivial though. If I did $(this).attr('value', $(this).attr('title')); for input[type=password] it would just show dots instead of default text. Changing type of the element (from password to text in this case) is not widely supported either. So the only way is to replace input[type='password'] with input[type='text'] element(util.js:26). This replacement seems to reset page tab index in IE and start from the begining of the page. Other browsers behave as expected.

I found solution to similar problem here but it does not work for me.

Do you have any idea how to fix it?

Answer 1

I happened to write a function to do exactly this today and found your post. This function handles password field swapping by using a setTimeout() with a delay of 1 so the next "frame" of execution can focus on the element. Just call watermark() from a document.ready() context.

/** Support outerHTML in all browsers, from http://www.briangrinstead.com/blog/jquery-outerhtml-snippet */
$.fn.outerHTML = function() {
        var doc = this[0] ? this[0].ownerDocument : document;
        return $('<div>', doc).append(this.eq(0).clone()).html();
};


/** Lightweight way to have subtle title instructions in text fields. */
function watermark(exclude) {
        if (!exclude) exclude = '';

        $('input[type="text"], input[type="password"]').each(function(){
                var self = this;
                function setTitle() {
                        if (self === document.activeElement) return;    // Don't change the currently focused field
                        if (self.value.length == 0 && !$(self).is(exclude)) {
                                $(self).addClass('textLabel');
                                if ($(self).attr('type') == 'password') {
                                        var newSelf = $($(self).outerHTML().replace(/type=["]?password["]?/i, 'type="text"')).get(0);
                                        $(self).replaceWith(newSelf);
                                        self = newSelf;
                                        $(self).data('restorePassword', true).focus(focus).blur(blur);
                                }
                                self.value = $(self).attr('title');
                        }
                }
                setTitle();

                function focus(){
                        if(self.value == $(self).attr('title')) {
                                $(self).removeClass('textLabel');
                                if ($(self).data('restorePassword')) {
                                        $(self).removeData('restorePassword');
                                        var newSelf = $($(self).outerHTML().replace(/type=["]?text["]?/i, 'type="password"')).get(0);
                                        $(self).replaceWith(newSelf);
                                        self = newSelf;
                                        setTimeout(function() {$(self).focus().focus(focus).blur(blur);}, 1);
                                }
                                self.value = '';
                        }
                }
                function blur(){
                        setTitle();
                }

                $(self).focus(focus).blur(blur);
        });
}