The following snippets can be used to emulate the behavior of the placeholder attribute found in Webkit browsers. The placeholder attribute inserts placeholder text into the value field of an input form. When the input is clicked on, the placeholder text disappears and reappears if the field is left empty.

The snippet below will insert the string given as the placeholder attribute in the textfield if no value is given. An example of the attribute and the JavaScript hacks for other browsers is the search field as found on http://www.apple.com.

Javascript (based on http://www.beyondstandards.com/archives/input-placeholders/):

Drupal.behaviors.activatePlaceholders = function(context) {
  if ($.browser.safari) { return false; }
  // Initialize empty text fields with their placeholder and assign handlers for blur and focus
  $("input[type=text]").each(function (i, element) {
    var input = $(element);
    if (input.attr("placeholder")) {
      // there is a placeholder set for this input element
      if (!input.val()) {
        input.val(input.attr("placeholder")).addClass('placeholder');
      }
      input.focus(function() {
        if (input.val() == input.attr("placeholder") && input.hasClass('placeholder')) {
          input.val('').removeClass('placeholder');
        }
      });
      input.blur(function() {
        if (!input.val()) {
          input.val(input.attr("placeholder")).addClass('placeholder');
        }
      });
    }
  });
  /* 
   * Register handler at buttons to clear placeholder before submit
   *
   * we need to be executed before the ahah JS magic takes place,
   * otherwise, the placeholders value will get submitted by ahahSubmit()
   *
   */
  $("input[type=submit].ahah-processed").each(function(i, button) {
    button = $(button);
    var removePlaceholders = function() {
      $("input[type=text].placeholder").each(function (i, element2) {
        var input = $(element2);
        if (input.val() == input.attr("placeholder")) {
          input.val('').removeClass('placeholder');
        }
      });
    }
    addAsFirstEventHandler(button, 'mousedown', removePlaceholders);
    addAsFirstEventHandler(button, 'keypress', removePlaceholders);
  });

  $("form").submit(function() {
    $("input[type=text].placeholder").each(function (i, element2) {
	    var input = $(element2);
	    if (input.val() == input.attr("placeholder")) {
        input.val('').removeClass('placeholder');
      }
    });
  });
}

function addAsFirstEventHandler(thingy, eventType, handler) {
  // make a copy of the event handlers
  var events = jQuery.extend({}, thingy.data('events')[eventType]);
  thingy.unbind(eventType);
  thingy.bind(eventType, handler);

  // readd the other event handlers
  for (var i in events) {
    thingy.bind(eventType, events[i]);
  }
}

You'd expect just to register for the onclick event with all buttons and clear any given placeholder value, but it is more complex with ahah in Drupal. We need to make sure to delete the placeholders value before ajaxSubmit() is called by any of the ahah event handlers.

I tried to get my code called from Drupal.ahah.prototype.beforeSubmit but can not see how that would be achieved.

CSS:

.placeholder {
  color: #A9A9A9;
}

Drupal PHP:

$element['name'] = array(
  '#type' => 'textfield',
  '#default_value' => isset($element['#value']['name']) ? $element['#value']['name'] : '',
  '#size' => 50,
  '#attributes' => array('placeholder' => 'Enter an email address here'),
  '#title' => 'Email',
);

This could be a starting point for a module not unlike http://drupal.org/project/extlink

Comments

mmilo’s picture

For anyone looking for similar functionality, take a look at Compact Forms.