Jquery Textbox's default value doesn't clear when remembered password
<p>I have a login page with an email textbox and a password textbox. Both textboxes will have the following default text respectively - "Email address" and "Password". When the user enters a value into either fields, the default text clears. I have this working except when the user sets their browser to remember their password.</p>

<p>When the password is populated automatically, the default text doesn't clear, so it looks like 2 pieces of text.</p>

<p><strong>Relevant HTML:</strong></p>

<pre><code>&lt;div class="input-wrapper"&gt;
&lt;label for="txtSID"&gt;Email address&lt;/label&gt;
&lt;input type="text" id="txtSID" name="txtSID" class="text" /&gt;
&lt;/div&gt;                              

&lt;div class="input-wrapper"&gt;
&lt;label for="txtPassword"&gt;Password&lt;/label&gt;
&lt;input type="password" id="txtPassword"  name="txtPassword" class="text" /&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Relevant CSS:</strong></p>

<pre><code>input.text {    
    position: relative;
    display: -moz-inline-box; /* ff2 */
    display: inline-block;
    *display: inline; /* ie6&amp;7 */
    zoom: 1;
}

.input-wrapper {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    *display: inline; /* ie6&amp;7 */
    zoom: 1;
}

.input-wrapper input.text {
    z-index: 2;
    margin: 0;
    border: 0;
    background: transparent;
    *background: url(http://hunch.com/media/img/t.png); /* ie7 does weird stuff with transparent background, also please don't deep link to this image from your code */
}

.input-wrapper label {   
    z-index: 1;
    position: absolute;  
    overflow: hidden;
}

.input-wrapper.focus label {
    filter:alpha(opacity=50);
    opacity: 0.6;
}

.input-wrapper.filled label {
    display: none;
}
</code></pre>

<p><strong>Relevant Jquery:</strong></p>

<pre><code>$(document).ready(function() {

    var parentSelector = '.input-wrapper',
    inputSelectors = [parentSelector + '&gt;input.text', parentSelector + '&gt;textarea'],
    len = inputSelectors.length,
    i;

    function update(force) {
        var $input = $(this),
        $parent = $input.parent(parentSelector);
        return $parent[force === true || $input.val() ? 'addClass' : 'removeClass']('filled');
    }

    function focus() {
        update.call(this).addClass('focus');
    }

    function blur() {
        update.call(this).removeClass('focus');
    }

    function keydown(evt) {
        var c = evt.keyCode;
        ((47 &lt; c &amp;&amp; c &lt; 91) || (95 &lt; c &amp;&amp; c &lt; 112) || (185 &lt; c &amp;&amp; c &lt; 223)) &amp;&amp; update.call(this, true);
    }

    $.fn.prepareInput = function() {
        return this.each(update);
    };

    for (i = 0; i &lt; len; i++) {
        $(inputSelectors[i]).live('focus', focus).live('blur', blur).live('keyup', update).live('click', update).live('keydown', keydown);
    }

    $(function() {
        for (i = 0; i &lt; len; i++) {
            $(inputSelectors[i]).prepareInput();
        }
    });
});
</code></pre>
