Issue with focus() after detach and insertBefore
<p>I am having an issue with using the Tab key to move through the fields when I detach the current focussed element and insert it again. Please find my code in <a href="http://jsfiddle.net/UjE9W/" rel="nofollow">jsfiddle.</a>. Also see below: </p>

<p>JS Code:</p>

<pre><code>$(document).ready(function() {
    $('.formElem').focusin(function() {
        // Remove default text on focus in
        if ($(this).val() == $(this).attr('title')) {
            $(this).val('').removeClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                id = '#' + $(this).attr('id');
                marker = $('&lt;span&gt;123&lt;/span&gt;').insertBefore($(this));
                $(this).detach().attr('type', 'password').insertAfter(marker);
                marker.remove();

            }
            if ($(this).get(0) != $(':focus').get(0)) {
                $(this).focus();
            }
        }
    }).focusout(function() {
        // Remove default text on focus out
        if ($(this).val() === '') {
            $(this).val($(this).attr('title')).addClass('defaultText');
            if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
                marker = $('&lt;span&gt;123&lt;/span&gt;').insertBefore($(this));
                $(this).detach().attr('type', 'text').insertAfter(marker);
                marker.remove();
            }
        }
    });
});​
</code></pre>

<p>The code changes the type of the field from text to password and back and forth. When you click or use Tab to reach the password field, it loses the focus after it has been added again. Thanks if somebody can figure out why.</p>
