Question

I’ve written this code for a friend. The idea is he can add a “default” class to his textboxes, so that the default value will be grayed out, and then when he clicks it, it’ll disappear, the text will return to its normal color, and then clicking a second time won’t clear it:

$(document).ready(function() {

    var textbox_click_handler = function clear_textbox() {
        $(this).removeClass('default');
        $(this).attr('value', '');
        $(this).unbind(textbox_click_handler);
    };

    $(".default").mouseup(textbox_click_handler);

});

The clicking-to-clear works, but I get the following error:

Uncaught TypeError: Object function clear_textbox() { ... } has no method 'split'

what is causing this? How can I fix it? I would just add an anonymous function in the mouseup event, but I’m not sure how I would then unbind it — I could just unbind everything, but I don’t know if he’ll want to add more functionality to it (probably not, but hey, he might want a little popup message to appear when certain textboxes are clicked, or something).

How can I fix it? What is the ‘split’ method for? I’m guessing it has to do with the unbind function, since the clearing works, but clicking a second time still clears it.

Answer 1

You can do it like this:

var textbox_click_handler = function(e) {
    $(this).removeClass('default')
        .attr('value', '')
        .unbind(e.type, arguments.callee);
};
$(function() {
    $(".default").mouseup(textbox_click_handler);
});

Or use the .one function instead that automatically unbinds the event:

$(function() {
    $(".default").one('mouseup', function() {
        $(this).removeClass('default').attr('value', '');
    });
});