Can a javascript function be ran on pageload instead of onkeyup?

Question

I have this javascript code below that uses jquery, it is suppoed to be a password strength meter type thing.

There is a html list with 3 items. Weak, Medium, Strong and as you type a password into a password form input, it will change the class/color of the list items.

It's is mostly just for fun but I would like to make it work a little better on my page, it works when you type in but if there is an error and a user gets redirected back to my signup form, I have the password pre-filled with there password they already typed in, I would like to have this script work if a password filled already has text in it somehow, just looking at this does it seem like something that would be easy to add in?

Instead of checking on key up it needs to check like on page load too is that part possible?

<script>
$.fn.passwordStrength = function( options ){
    return this.each(function(){
        var that = this;that.opts = {};
        that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
        that.div = $(that.opts.targetDiv);
        that.defaultClass = that.div.attr('class');
        that.percents = (that.opts.classes.length) ? 75 / that.opts.classes.length : 75;
        v = $(this)
        .keyup(function(){
            if( typeof el == "undefined" )
            this.el = $(this);
            var s = getPasswordStrength (this.value);
            var p = this.percents;
            var t = Math.floor( s / p );
            if( 75 <= s )
            t = this.opts.classes.length - 1;
            this.div
            .removeAttr('class')
            .addClass( this.defaultClass )
            .addClass( this.opts.classes[ t ] );
        })
    });

    function getPasswordStrength(H){
        var D=(H.length);
        // Added below to make all passwords less than 4 characters show as weak
        if (D<4) { D=0 }
        if(D>5){
            D=5
        }
        var F=H.replace(/[0-9]/g,"");
        var G=(H.length-F.length);
        if(G>3){G=3}
        var A=H.replace(/\W/g,"");
        var C=(H.length-A.length);
        if(C>3){C=3}
        var B=H.replace(/[A-Z]/g,"");
        var I=(H.length-B.length);
        if(I>3){I=3}
        var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
        if(E<0){E=0}
        if(E>75){E=75}
        return E
    }
};

//then on the page we call it like this

$(document).ready(function() {
    $('input[name="password"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
});
</script>

Answer 1

Trigger the keyup event if the password box is filled in:

$(document).ready(function() {
    var pwd = $('input[name="password"]')
    pwd.passwordStrength( ... );

    if(pwd.val().length > 0) { pwd.trigger('keyup'); }
});

Not sure this will work as-is, but you get the idea...

Answer 2

You can force the function to be called by triggering the event you've attached it to, in this case, keyup. Change the bottom of your script to this:

$(document).ready(function() {
    $('input[name="password"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
    $('input[name="password"]').trigger('keyup');
});

Answer 3

If I understand correctly, you want to call the anonymous function which you're attaching to the keyup event on page load.

You have two options, you can either make that function not anonymous anymore and call it explicitly or your can trigger the keyup event handler by calling .keyup() (with no parameters).

Something like:

$(document).ready(function() {
    $('input[name="password"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
    $('input[name="password"]').keyup();
});

Answer 4

You can use this:

$(document).ready( //your function );