Javascript for the placeholder attribute
The following snippets can be used to emulate the behavior of the placeholder attribute as found in webkit browsers.
It will insert the string given as the placeholder attribute in the textfield if no value is given. An example of the attribute and the JS 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