Question

I have a nice default-value check going and client wants to add additional functionality to the onBlur event. The default-value check is global and works fine. The new functionality requires some field-specific values be passed to the new function. If it weren’t for this, I’d just tack it onto the default-check and be done.

My question is can I do this sort of thing and have them both fire? What would be a better way?

THE DEFAULT-CHECK

$(document.body).getElements('input[type=text],textarea,tel,email').addEvents ({
    'focus' : function(){
        if (this.get('value') == this.defaultValue)
        {
            this.set('value', '');
        }
    },
    'blur' : function(){
        if (this.get('value') == '')
        {
            this.set('value', (this.defaultValue));
        }
    }
});

ADDED FUNCTIONALITY

<input type='text' id='field_01' value='default data' onBlur='driveData(event, variableForThisField, this.value);'>

The idea is to handle default values as usual, but fire the new function when the field’s values are entered. Seems to me one has to fire first, but how?

Again, because the values passed a field specific, I can’t just dump it into the global default-check function.

I hope this makes sense.

Answer 1

Just store the custom variable in a custom data attribute. Not technically standards-compliant [in HTML 4], but it works:

<input type='text' id='field_01' value='default data' data-customvar="variableForThisField">

$(document.body).getElements('input[type=text],textarea,tel,email').addEvents ({
    'focus' : function(){
        if (this.get('value') == this.defaultValue)
        {
            this.set('value', '');
        }
    },
    'blur' : function(){
        if (this.get('value') == '')
        {
            this.set('value', (this.defaultValue));
        } else {
            driveData(this.get('value'), this.get('data-customvar'));
        }
    }
});

fiddle: http://jsfiddle.net/QkcxP/6/