Question

Trying to have a custom function where the text is in the input on page load so that its grouped with the rest of the function where the text creates “information” like text in the input. I have tried, .load(), .bind('load'), .ready() and I dont get anything. Just seeing if there might be a solution to this bump in the road.

//removed some of the validation code for simplicity. 

/*
to set a grey text infomation into a input field
*/
$.fn.greyInfo = function (text)
{

    //troubled code - start
    $(this).load(function()
    {
        $(this).val(text);
        $(this).css('color', 'grey');
    });
    //troubled code - end

    $(this).blur(function()
    {
        if($(this).val() == "")
        {
            $(this).val(text);
            $(this).css('color', 'grey');
        }
    });

    $(this).focus(function()
    {
        if($(this).val() == text)
        {
            $(this).val("");
            $(this).css('color', 'black');
        } 
    });

}

Answer 1

the answer is simple, you don’t need to call the function load as it is already there.

$.fn.greyInfo = function(text)
{

// you also don't need to reference $(this) as the jquery object is implied
        this.val(text);
        this.css('color', 'grey');


    $(this).blur(function()
    {
        if($(this).val() == "")
        {
            $(this).val(text);
            $(this).css('color', 'grey');
        }
    });

    $(this).focus(function()
    {
        if($(this).val() == text)
        {
            $(this).val("");
            $(this).css('color', 'black');
        } 
    });

};