HOWTO: Quick jQuery Usability Tip: Automatically Clear/Restore Useful Default Values
Posted on May 13, 2008 | Tags:
Just wanted to post this quick trick I’ve been using lately to automagically hide/show useful default text field values (e.g. “Search” in the search box) using jQuery and the ultra-handy Drupal.settings() object.
Here’s the short and sweet copy/pastable jQuery code:
$(document).ready(function(){
Drupal.settings.inputDefaults = {}
$("input:text").focus(function() {
var element = $(this);
Drupal.settings.inputDefaults[element.attr("id")] = element.val();
element.val('');
});
$("input:text").blur(function() {
var element = $(this);
if (element.val() == '') {
element.val(Drupal.settings.inputDefaults[element.attr("id")]);
}
});
});Basically this quick snippit will add a blank array object (ahh, the joys of moving between js and PHP) to the Drupal.settings object — which is useful for all sorts of great javascript functionality, and is integral to Drupal 6.0’s extended AHAH features; if you don’t already know it, do your self a favor and study up — and automatically fill it with any textarea’s default values when a user clicks/tabs it into focus. This lets us clear the default value, but replace it quickly if the user moves on to another element.
As listed, you probably don’t want this on your site, as it will affect things like editing nodes (e.g. title inputs will go blank when you click on them… not what you necessarily want), but it’s easy to tune this to only hit elments within certain forms since every form in Drupal has a unique #id.
Thinking about this, I decided to tune it up and actually make an extended jQuery function for this so it could be more easily applied to speecific elements like so:
$(document).ready(function(){
// handle hide/show for text field default values in only one form
Drupal.settings.input_defaults = {};
$("#specific-form input:text").clearDefaultText();
});
jQuery.fn.clearDefaultText = function() {
return this.each(function(){
var element = $(this);
Drupal.settings.inputDefaults[element.attr("id")] = element.val();
element.focus(function() {
if (element.val() == Drupal.settings.input_defaults[element.attr("id")]) {
element.val('');
}
});
element.blur(function() {
if (element.val() == '') {
element.val(Drupal.settings.inputDefaults[element.attr("id")]);
}
});
});
}This is a pretty nice little plugin, I think, and it shows just how easy it can be to add nice/reusable UI functionality. Happy Drupaling, and go get ‘em jQuery!
(updated w/slight improvement to jQuery fn)
(updated again w/object style improvements from comments)
Drupal 7 issue
There’s an issue against Drupal 7 for this, it uses the jQuery Example plugin. http://drupal.org/node/223941
There is a jQuery plugin for
There is a jQuery plugin for this already, I forget what it is called though. Pretty much exactly what I have been using as well though :P
Probably want to get some try{}catch(){} blocks in there when it comes to accessing the Drupal object properties
Don't use Array()
Please, please please, don’t use Array() when you mean {}, which is “new Object()”. When you’re thinking “associative array” in PHP, think “object” in JavaScript. Arrays are always and only used for integer-indexed lists in JavaScript.
Besides, using [] is way cooler than “new Array()” if you really want to use an array.
One last stylistic suggestion: in JavaScript it is more preferable to use camelCase over under_score, so inputDefaults would be better than input_defaults.
thx
Updated w/those changes. Thanks!
Post new comment