Tackling browser Autofill with jQuery
<p>I wanted to make a particular checkbox visible when I type at-least one character in it, the following jQuery function works brilliantly for all test cases but not one :
What if the browser autofills the input (say via remember me.). In this case the checkbox is not visible when the browser has filled in content by default, but comes up as soon as I start editing it. How to tackle it?</p>

<p>Also, instead of a placeholder attribute, I am using a label styled inside the input element that goes away if there is any text (works for above test case too)</p>

<p>Here is my JavaScript for the initial code :-</p>

<pre><code>    var hideToggleBtn = function(input, label) {
    // 'show password' checkbox
    input.showPassword().keyup(function(){
        if (input.val().length == 0) {
            label.hide();
        } else {
            label.css("display", "inline").show();
        }
    });
    label.hide();
};
hideToggleBtn($('#password'), $('label[for=show]'));
hideToggleBtn($('#adminpass'), $('label[for=show]'));
hideToggleBtn($('#pass2'), $('label[for=personal-show]'));
</code></pre>

<p>This is regarding a jQuery plugin I am using : <a href="http://unwrongest.com/projects/show-password/" rel="nofollow">http://unwrongest.com/projects/show-password/</a></p>

<p>I know that keyup(); function doesn't detect a browser refill, so a solution is most welcome. </p>
