Leandro Vieira Pinho wrote:
Hi Guys,
I know that already exist a plugin to manage a defaultValue of input
elements. But I create another.
I´m new with jQuery, principally in create plugins. So, I would like
someone look the plugin code and tell me if it´s in a best practice.
Thanks.
The plugin code:
/**
* jQuery defaultValue plugin
* @version 0.1
* @author Leandro Vieira Pinho <[EMAIL PROTECTED]>
* How to use
* $(function() {
* $('input').defaultValue(); // for all input elements
* $('textarea').defaultValue(); // for all textarea elements
* $('#q').defaultValue(); // for a especific object
* });
*/
jQuery.fn.defaultValue = function() {
this.each( function() {
$(this).click(function() {
clearDefaultValue(this);
});
$(this).focus(function() {
clearDefaultValue(this);
});
$(this).blur(function() {
backDefaultValue(this);
});
function clearDefaultValue(obj) {
if ( $(obj).val() == $(obj)[0].defaultValue ) {
$(obj).val(''); }
};
function backDefaultValue(obj) {
if ( $(obj).val() == '' ) {
$(obj).val($(obj)[0].defaultValue); }
};
});
};
$(function() {
$('input#leo').defaultValue();
$('textarea').defaultValue();
});
Leandro, a function added to the fn namespace is usually considered to
be chainable, so you may want return the jQuery object like for example:
jQuery.fn.defaultValue = function() {
return this.each(function() {
});
};
In addition - and this is what I see quite often - I spotted a little
overuse of jQuery:
$(obj)[0].defaultValue
What that code does is wrapping an element in a jQuery object and
immediatly get it out of there again to access a DOM property. That is
obviously the same as:
obj.defaultValue
with some useless overhead. There's no need to use a jQuery object for
everything!
I'd also cache the objects instead of creating a new one three times:
function clearDefaultValue(obj) {
var $$ = $(obj);
if ($$.val() == obj.defaultValue) { $$.val(''); }
};
Actually you don't need to pass a obj reference to the function at all.
"this" in the event handler function refers to the element that the
event handler was attached to. You can than also move these functions
out of the each loop. In the end you don't need to use each at all and
use chaining.
That said, here's how I'd simplify the plugin:
jQuery.fn.defaultValue = function() {
function clearDefaultValue() {
var $$ = $(this);
if ($$.val() == this.defaultValue) { $(obj).val(''); }
}
function backDefaultValue() {
var $$ = $(this);
if ($$.val() == '') { $$.val(this.defaultValue); }
}
return this
.click(clearDefaultValue)
.focus(clearDefaultValue)
.blur(backDefaultValue);
};
HTH, Klaus
