How to reuse JavaScript function for form input control?

Question

I have an input field that works exactly as I want it to, however, I have numerous fields repeating this same code. Is it possible to call a JavaScript function and obtain the same results?

Here is my currently working html:

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = 'Last Name'; this.style.color= 'gray';} 
else {this.style.color= 'black';}"
onfocus="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = ''; this.style.color= 'gray';}
else {this.style.color= 'black';}"
onselect="this.style.color= 'black';"
onclick="this.style.color= 'black';"/>

But I was hoping to be able to do something like this:

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="onBlurAction()";
onfocus....
etc....
</input>

<script>
function onBlurAction()
{
    if((this.value == 'Last Name') || (this.value == '')) 
        {this.value = 'Last Name'; this.style.color= 'gray';} 
    else {this.style.color= 'black';}
}
function onFocusAction....
etc....
</script>

Answer 1

In your function, this refers to window global variable, you should pass this as an argument:

onblur="onBlurAction(this)"

While the function(s) will be something like:

function onBlurAction(el)
{
    if (el.value == 'Last Name' || el.value == '') {
        el.value = 'Last Name';
        el.style.color = 'gray';
    } else {
        el.style.color = 'black';
    }
}

Another way is to not changing the function but use onblur that way:

onblur="onBlurAction.call(this)"

Answer 2

You can use a function as the handler for more than one event.

<input type="text" name="lname" value="Last Name" style="color:gray;" 
    onblur="onBlurAction();" onfocus="onBlurAction();" .../>

That will call onBlurAction for both the blur and focus events. You can do something similar for onselect and onclick.

Answer 3

Could you not use the placeholder attribute?

Edit:

Doing as Thomas Upton mentioned will not work because he is using the .value attribute. As soon as the user types something in, the value will change, therefore the function will not be able to check the (default) value correctly because it has been changed.

He could use the placeholder attribute instead to aid the function. Something like this:

        <input type="text" name="lname" value="" placeholder="Last Name" style="color:gray;" 
               onblur="javascript:onBlurAction(this.name);"
               onfocus="javascript:onBlurAction(this.name);"
               onselect="javascript:onBlurAction(this.name);"
               onclick="javascript:onBlurAction(this.name);">

               function onBlurAction(elname)
               {
                   value = document.getElementById(elname).getAttribute("placeholder");
                   if ((this.value == value) || (this.value == ''))
                   {
                       this.value = value;
                       this.style.color = 'gray';
                   }
                   else {
                       this.style.color = 'black';
                   }
               }

He passes the element name to the function and this function will get the placeholder value. This will work for all his text inputs reusing the function as he wishes. Test here: http://fiddle.jshell.net/6qMj8/1/