Javascript: programmatically change onfocus function

Question

I have several text boxes that can auto-fill with data and I am using a javascript function to clear the text box one time, then revert to a javascript function that only clears when certain text is input.

For instance: A text box with standard input as "ADDRESS" will be auto-filled with "ABC123" then onfocus be cleared. If the text box remains empty, then onblur, it will return to "ADDRESS"

This is similar to the question at Change an element's onfocus handler with Javascript? but I couldn't get it to work. Any suggestions?

My text boxes are just ASP.NET text boxes and the onfocus/onblur events are set in the code behind:

<asp:TextBox ID="txtAddress" Text="ADDRESS" runat="server" CssClass="txtboxwrong" />

Code Behind:

txtAddress.Attributes.Add("onFocus", "clearOnce(this,'ADDRESS');")
txtAddress.Attributes.Add("onBlur", "restoreText(this,'ADDRESS');")

My javascript is as follows:

function clearText(obj, deftext, defclass, defvalue) {
    if (obj.value == deftext) {
        if (!defvalue) { defvalue = '' }
        obj.value = defvalue;
        if (!defclass) { defclass = 'txtbox' }
        obj.className = defclass;
    }
};

function restoreText(obj, deftext, defclass, defvalue) {
    if (!defvalue) { defvalue = '' }
    if (obj.value == defvalue || obj.value == '')  {
        obj.value = deftext;
        if (!defclass) { defclass = 'txtboxwrong' }
        obj.className = defclass;
    }
};

function clearOnce(obj, deftext) {
    obj.value = '';
    obj.className = 'txtbox';
    obj.onfocus = function () { clearText(obj, deftext); };
};

EDIT:

Thanks to @rescuecreative, I have fixed the probem. By returning the onfocus change in clearOnce, it sets the element's onfocus to the right function and works properly! Edit below:

function clearOnce(obj, deftext) {
obj.value = '';
obj.className = 'txtbox';
return function () { clearText(obj, deftext); };

};

Answer 1

Can your asp textbox use the placeholder attribute? In html5, the placeholder attribute automatically creates the exact functionality you're looking for.

<input type="text" placeholder="ADDRESS" />

The above text field will show the word "ADDRESS" until focused at which point it will empty out and allow the user to type. If the user leaves the field and it remains empty, the placeholder reappears. If you can't depend on html5, there is a JavaScript plugin that will create that functionality in browsers that don't support it natively.

Answer 2

It seems like you wanted to do something similler to watermarks. You can achiever it in much simpler way. Try this.

function clearOnce(obj, deftext) {
    if(obj.value == deftext) {
        obj.value = '';
        obj.className = 'txtbox';
    }
}

function restoreText(obj, deftext) {
    if(obj.value == '') {
        obj.value = deftext;
        obj.className = 'txtboxwrong';
    }
}

Answer 3

Ideally you would just use the placeholder attribute, but that may not be supported on older browsers. If you can use jQuery, something like this would work for you:

$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

If nothing is ever entered into the field, the code below will ensure the placeholder text doesn't get submitted with the form:

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});