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); };

};

score 1 · Accepted Answer · answered Oct 02 '13 at 18:46

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.

answered Oct 02 '13 at 18:46

rescuecreative

3,607
3
18
28

I'll play around with it for now, but is there a quick fix for the code I already have written? – JacobD Oct 02 '13 at 18:53
@JustAGuyIKnow Sure. I'm not an ASP guy but what it looks like to me is that your clearOnce function is called every time the field is focused. That means, all it does is reset the onfocus property of the element every time it's called. In fact, by overwriting the element's onfocus property, you are probably destroying ASP's ability to interface with the focus event. So instead of changing the onfocus property at the end of clearOnce, try RETURNING the function that calls clearText. – rescuecreative Oct 02 '13 at 19:06
OH MY GLOB IT WORKED! Thank you @rescuecreative! I'll post up the answer and attribute it to your help. – JacobD Oct 02 '13 at 19:14
Just doin' what I can :) – rescuecreative Oct 02 '13 at 19:15

score 0 · Answer 2 · answered Oct 02 '13 at 18:57

0

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';
    }
}

answered Oct 02 '13 at 18:57

Ghanshyam Bhalala

151
5

This will erase any input as soon as you focus on it, right? I had that for a while, but users were getting annoyed with it. I want it to be able to detect a certain string that triggers the text to clear. – JacobD Oct 02 '13 at 19:07

score 0 · Answer 3 · answered Oct 02 '13 at 19:13

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('');
        }
    })
});

Javascript: programmatically change onfocus function

3 Answers3