drupal.ajax-form.placeholder.js

(function($) {
  var settings = {};

  settings.customClass = 'placeholder';
  
  function args(elem) {
    // Return an object of element attributes
    var newAttrs = {};
    var rinlinejQuery = /^jQuery\d+$/;

    $.each(elem.attributes, function(i, attr) {
      if (attr.specified && !rinlinejQuery.test(attr.name)) {
        newAttrs[attr.name] = attr.value;
      }
    });

    return newAttrs;
 }
 
 function setPlaceholder(event) {
    var $replacement;
    var input = this;
    var $input = $(input);
    var id = input.id;
    
    // If the placeholder is activated, triggering blur event (`$input.trigger('blur')`) should do nothing.
    if (event && event.type === 'blur') {
      if ($input.hasClass(settings.customClass)) {
        return;
      }
  
      if (input.type === 'password') {
        $replacement = $input.prevAll('input[type="text"]:first');
        if ($replacement.length > 0 && $replacement.is(':visible')) {
          return;
        }
      }
    }
    
    if (input.value === '') {
      if (input.type === 'password') {
        if (!$input.data('placeholder-textinput')) {
          try {
            $replacement = $input.clone().prop({ 'type': 'text' });
          } catch(e) {
            $replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
          }

          $replacement
            .removeAttr('name')
            .data({
                'placeholder-enabled': true,
                'placeholder-password': $input,
                'placeholder-id': id
            })
            .bind('focus.placeholder', clearPlaceholder);

          $input
            .data({
              'placeholder-textinput': $replacement,
              'placeholder-id': id
            })
            .before($replacement);
        }
        input.value = '';
        $input = $input.removeAttr('id').hide().prevAll('input[type="text"]:first').attr('id', $input.data('placeholder-id')).show();
      } else {
        var $passwordInput = $input.data('placeholder-password');
        if ($passwordInput) {
            $passwordInput[0].value = '';
            $input.attr('id', $input.data('placeholder-id')).show().nextAll('input[type="password"]:last').hide().removeAttr('id');
        }
      }
  
      $input.addClass(settings.customClass);
      $input[0].value = $input.attr('placeholder');
    } else {
      $input.removeClass(settings.customClass);
    }
  }
    
  function clearPlaceholder(event, value) {
    var input = this;
    var $input = $(input);
    
    if (input.value === $input.attr('placeholder') && $input.hasClass(settings.customClass)) {
      input.value = '';
      $input.removeClass(settings.customClass);

      if ($input.data('placeholder-password')) {
        $input = $input.hide().nextAll('input[type="password"]:first').show().attr('id', $input.removeAttr('id').data('placeholder-id'));
        // If `clearPlaceholder` was called from `$.valHooks.input.set`
        if (event === true) {
          $input[0].value = value;
          return value;
        }
        $input.focus();
      } else {
        input == safeActiveElement() && input.select();
      }
    }
  }
  
  function safeActiveElement() {
    // Avoid IE9 `document.activeElement` of death
    try {
      return document.activeElement;
    } catch (exception) {}
  }
  
  $(document).delegate('form', 'form-pre-serialize.placeholder', function(){
    // Clear the placeholder values so they don't get submitted
    var $inputs = $('.placeholder', this).each(function() {
        clearPlaceholder.call(this, true, '');
    });
  
    setTimeout(function() {
        $inputs.each(setPlaceholder);
    }, 10);
  });
})(jQuery);