input guide (field description)

show text in a field to describe the input, hide when focused, show when blurred and empty etc.

by John Allan

HTML

<textarea data-input-guide="type some stuff here..."></textarea>

JavaScript

/*  hcfInputGuide */

(function ($) {

  var methods = {
    init : function (options) { 
        
        var settings = $.extend( {
            'guideClass'         : 'hcf-InputGuideClass'
        }, options);
    
        return this.each(function () {
            var $this, guide, v; 
            $this = $(this);
            guide = $this.attr('data-input-guide');
            v = $this.val();
            if ($.trim(v) === '') {
                $this
                    .addClass('hcf-Invalid')
                    .val(guide);
            }

            $this
                .bind({
                    'focus': function () {
                        var v;
                        v = $this.val();
                        if (v === guide) {
                            $this.val('');
                        }
                    },
                    'blur': function () {
                        var v;
                        v = $this.val();
                        if ($.trim(v) === '') {
                            $this
                                .addClass('hcf-Invalid')
                                .val(guide);
                        } else {
                            $this.removeClass('hcf-Invalid');
                        }
                    }
                });
        });
    },
    reset : function () {
        return this.each(function () {
            var $this, guide; 
            $this = $(this);
            guide = $this.attr('data-input-guide');
            $this
                .addClass('hcf-Invalid')
                .val(guide);

        });
    }
  };

  $.fn.hcfInputGuide = function ( method ) {
    
    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on...