Placeholder JQuery Thingo for Matt

placeholder.js

(function($) {
  //This represents a "Placeholder"
  var Placeholder = function($element, options){
    //set up our placeholder
    
    this.options = options || {};
    this.$input = $element;
    this.$placeholderText = this.input.attr('placeholder');
    this.$placeholder = $('<div class="placeholder">')
      .css({ 
        position: 'absolute',
        paddingLeft: (($input.outerHeight() - $input.height()) / 2) + "px" 
      })
      .text(placeholderText);
    
    this.wrapperStyles = {
      position: 'relative',
      width: this.$input.outerWidth() + "px",
      lineHeight: this.$input.outerHeight() + "px",
      fontSize: this.$input.css('fontSize')
    };
    this.$placeholderWrapper = $('<div class="placeholder-wrapper">');
    this.$placeholderWrapper.css(this.wrapperStyles).html(this.$placeholder);
    
    this.$input.removeAttr('placeholder');
    
    // Wrap input field in placeholder wrapper
    // Don't use .wrap() because it clones it.
    this.$input.before(this.$placeholderWrapper).appendTo(this.$placeholderWrapper);
        
    // Don't show placeholder if pre-filled
    if ($input.val()) {
      this.hidePlaceholder();
    }
    
    this.bindEvents();
    // Do all our event binding in one place
  };
  
  Placeholder.prototype.bindEvents = function(){
    /*
     * The idea here is to place the functionality of these bound events
     * into methods on the Placeholder class. That way if you need to duplicate
     * them you can easily do that. Or if you need to call other methods on
     * the class you can do that too.
     * It's also slightly more nice and organised.
     */
 
    // Nasty hack because jQuery overrides "this"
    // Cleaner with CoffeeScript, or if you use Underscore
    var self = this;
    this.bind('click.placeholder', function(event){
      self.focusInput();
    });
      
    $input.bind('focus.placeholder', function(event) {
      self.focusPlaceholder();
    });
  
    $input.bind('blur.placeholder', function() {
      self.unfocusPlaceholder();
    });
  
    $input.bind('keydown.placeholder', function(evt) {
      self.keyDown(evt.which);
    });
    
    $input.bind('keyup.placeholder', function(evt) {
      self.showPlaceholder();
    });
  }
  
  Placeholder.prototype.hidePlaceholder = function() {
    this.$placeholder.hide();
  };
  
  Placeholder.prototype.showPlaceholder = function() {
    if(this.$input.val() == ''){
      this.$placeholder.show();
    }
    // Some other conditional stuff will happen here.
  };
  
  Placeholder.prototype.focusInput = function(){
    this.$input.focus();
  };
  
  Placeholder.prototype.focusPlaceholder = function(){
    this.$placeholderWrapper.addClass('focused');
  };
  
  Placeholder.prototype.unfocusPlaceholder = function(){
    this.$placeholderWrapper.removeClass('focused');
    this.showPlaceholder();
  };
  
  Placeholder.prototype.keyDown = function(key){
    // A list of keycodes that don't output any characters
    if(!(evt.which === 13 || (evt.which >= 16 && evt.which <= 20) || (evt.which === 27) || (evt.which >= 33 && evt.which <= 40) || (evt.which >= 91 && evt.which <= 93) || (evt.which >= 112 && evt.which <= 123) || (evt.which >= 144 && evt.which <= 145) || evt.which === 224)) {
      this.hidePlaceholder();
    }
  };
  
  $.fn.placeholder = function(options){
    //Iterate over all the elements and initialise placeholder for them.
    this.filter('input, textarea').each(function() {
      var placeholder = new Placeholder($(this), options);
    });
    
    return this; //Don't break jQuery chaining
  };
})(jQuery);