One of the more subtle, but very useful form feedback tools, is to animate the background when a user has changed a field. This animation is mostly useful with text typed inputs, however, there is a case to be made about textarea as well. Todays article shows a singleton method that manages a highlight animation, triggered whenever a user changes a text field. The developer need only register the field and the ChangeHighlighter widget will take care of the rest.

Example 1: ChangeHighlighter Singleton

Core.Controller.ChangeHighlighter = (function() {
    // local namespace
    var _F = function() {},
        _that = null,
        _YUD = YAHOO.util.Dom,
        _YUE = YAHOO.util.Event;

    // public namespace
    _F.prototype = {

        /**
         * Registers the input with this widget.
         * @method register
         * @param elem {Element} Required. The input element to listen on.
         * @param conf {Object} Optional. Configuration options.
         * @static
         */
        register: function(elem, conf) {
            var npt = _YUD.get(elem);

            // valid input
            if (npt && npt.type && text === npt.type) {
                var cfg = conf ? conf : {color: #EE0},
                    lastValue = npt.value;

                if (! cfg.duration) {cfg.duration = 0.75;} 
                
                _YUE.on(npt, blur, function() {
                    var val = (cfg.trim && .trim) ? npt.value.trim() : npt.value;
                    npt.value = val;
                    
                    if (lastValue === val) {
                        // no change, do nothing
                    }
                    // value changed, animate
                    else {
                        lastValue = val;
                        var obgColor = _YUD.getStyle(npt, background-color),
                            anim = new YAHOO.util.ColorAnim(npt, {backgroundColor: {to: cfg.color}}, cfg.duration);

                        anim._onComplete.subscribe(function() {_YUD.setStyle(npt, background-color, obgColor);});
                        anim.animate();
                    }
                });
            }
            else {
                alert(ChangeHighlighter:add Error - Invalid input parameter provided.);
            }
        },

        /**
         * Registers the input with this widget.
         * @method register
         * @param elem {Element} Required. The form element to search.
         * @param conf {Object} Optional. Configuration options.
         * @static
         */
        registerForm: function(elem, conf) {
            var form = _YUD.get(elem);

            // valid element
            if (form) {
                var npts = form.getElementsByTagName(input);

                // iterate on inputs and register
                for (var i = 0; i < npts.length; i += 1) {
                    if (text === npts[i].type) {
                        _that.register(npts[i], conf);
                    }
                }
            }
        }
    };

    _that = new _F();
    return _that;
})();

All the work is done inside of the static "Core.Controller.ChangeHighlighter.register" method, so that a closure can be leveraged each time the blur event is subscribed to. The register method requires two parameters: the input to listen on and an optional configuration. The configuration allows the developer to change the animation color, the duration, and whether or not the values of the inputs should be trimmed before comparing (this also requires that "String.prototype" has been extended with a trim method). A variable lastValue is used to track the previous value of the input so that the blur event callback knows that a change has occurred (this is why a closure is needed). Then inside the blur event callback, the lastValue is compared with the current value, and a color animation is fired if the values are not the same.

There is also a registerForm method, which simply searches for text inputs and then calls the register method for each. I avoided using any non-YUI methods for ease of use.