Question

On my forms when the page loads I make the default text in the inputs light gray like this:

var formInputs = $('#notifyForm input');
formInputs.addClass('defaultText');

Then I have them turn back to black on focus using removeClass. This all works fine. The problem I’ve run into is, if there’s an error and the page reloads to display a PHP error msg, the user’s text that’s still in the inputs, turns gray. My solution for this is:

formInputs.addClass(function()
{
    if($(this).attr('value') === $(this).attr('title'))
    {
        $(this).addClass('defaultText');
    }
});

But I know there has to be something wrong with calling addClass inside an addClass handler. Can anyone suggest a better way to do this? Thank you.

Answer 1

From the function you pass to addClass you can return a string which will be the class name you want to add. Try this:

formInputs.addClass(function() {
    if (this.value === this.title)
        return 'defaultText';
});