jQuery Overview

Welcome!

http://webimpressions.info/grwdpres/

* Right arrow key or Return/Enter to move forward; left arrow key to move backward. Or, use slide list at bottom of page (appears on hover)

Roger Roelofs

Overview

Selectors

Complex Selectors

Events

DefaultText

  $(document).ready(function() {
    $('#FirstName').bind('focus', function(e) {
      var me = $(this);
      if ( me.val() == 'Type your name' ) { 
        me.val('').removeClass('defaultText');
      }
    }).bind('blur', function(e) {
      var me = $(this);
      if ( me.val() == '' ) {
        me.val('Type your name').addClass('defaultText');
      }
    }).trigger('blur');
  })
  

First Name:

So what's wrong with this code?

DefaultText (2)

  $(document).ready(function() {
    $('#FirstName').bind('focus', function(e) {
      var me = $(this);
      if ( me.val() == 'Type your first name' ) { 
        me.val('').removeClass('defaultText');
      }
    }).bind('blur', function(e) {
      var me = $(this);
      if ( me.val() == '' ) {
        me.val('Type your first name').addClass('defaultText');
      }
    }).trigger('blur');
    $('#LastName').bind('focus', function(e) {
      var me = $(this);
      if ( me.val() == 'Type your last name' ) { 
        me.val('').removeClass('defaultText');
      }
    }).bind('blur', function(e) {
      var me = $(this);
      if ( me.val() == '' ) {
        me.val('Type your last name').addClass('defaultText');
      }
    }).trigger('blur');
  })
  

First Name:
Last Name:

DefaultText (3)

    <script src='jquery.defaultText.js'><script>
    $(document).ready(function() {
      $("input[data-defaulttext]").defaultText();
    });
  

  First Name: 
  <input name='FirstName' id='FirstName' value='' data-defaulttext='Type your first name' >
Last Name: <input name='LastName' id='LastName' value='' data-defaulttext='Type your last name' >

First Name:
Last Name:

Ah, that's better

DefaultText Plugin: part a

(function($) {
  $.fn.defaultText = function(params) {
    var methods = {
      dtFocus: function(e) {
        var me = $(this), opts = me.data("defaultTextOpts");
        if ( me.val() == opts.defaulttext ) {
          me.val("").removeClass(opts.defaulttextclass);
        }
      },
      dtBlur: function(e) {
        var me = $(this), opts = me.data("defaultTextOpts");
        if (( $.trim(me.val()) == "" ) || ( me.val() == opts.defaulttext )) {
          me.val(opts.defaulttext).addClass(opts.defaulttextclass);
        }
      }
    },
    settings = $.extend({}, $.fn.defaultText.defaultOptions, params);
  

DefaultText Plugin: part b

    return this.each(function() {
      $(this).data("defaultTextOpts", $.extend(settings, $(this).data()))
        .bind("focus.defaultText", methods.dtFocus)
        .bind("blur.defaultText", methods.dtBlur).trigger("blur.defaultText");
    });
  };
  $.fn.defaultText.defaultOptions = {
    defaulttext: "Default Text",
    defaulttextclass: "defaultText"
  };
})(jQuery);
  

Thank You!

Thanks so much for listening.