Forms: Returning the Default Value when Leaving a Blank Input Box

In the last article I showed you how to clear an input box after a user selects it. Now we are taking that one step further and if they leave the form blank, we are returning the default value. Alternatively some other text can be added there as well.

Again this is a simple addition. This is the box we are after:

The code is as follows:

Add this to the script section you created before:

function returnMe(formfield){
 if (formfield.value=="")
  formfield.value = formfield.defaultValue
}

and this to the input box:

onblur="returnMe(this)"

The entire thing looks like this now:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }

 function returnMe(formfield){
  if (formfield.value=="")
   formfield.value = formfield.defaultValue
 }

</script>

and

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" onblur="returnMe(this)"/>

In the input box, we added the onblur attribute. This tells us that when the item's focus is lost, ie the user click out of the box, or tabs out of it, then the returnMe function is run.

The returnMe function is much like the clearMe function. Now, it says that if the current value is blank, we change the current value to match the default value.

Alternatively, we could have different text be put there. Say we change it so that it says "Use Me, Man!" We would simple change the line that says

formfield.value = formfield.defaultValue

to

formfield.value = "Use Me, Man!"

But that does not really draw attention to the box. Lets make the font red, and the background yellow. This will draw attention to their mistake.

function returnMe(formfield){
 if (formfield.value==""){
  formfield.value = "Use Me, Man!"
  formfield.style.color = "red";
  formfield.style.background = "yellow";
 }
}

Now, notice that we have three lines following the if statement. Because there are more than one, we wrap them in { }. Otherwise the browser will assume it is just the one line and the other two will be run whether the if statement is true or false. Lets look at the two new lines.

formfield.style.color = "red";
formfield.style.background = "yellow";

The first style refers to the font color. The second the background color. You can put most CSS styles here. You could also change the font-size, border, width and more with this attribute.

[Updated per comment below]

Thanks John for pointing out an error. Once the form is correctly entered, the form should return it's color to normal.

A simple way to do this is to just add a else statement, like this:

function returnMe(formfield){
 if (formfield.value==""){
  formfield.value = "Use Me, Man!"
  formfield.style.color = "red";
  formfield.style.background = "yellow";
 }
 else{
  formfield.style.color = "black";
  formfield.style.background = "white";
 }
}

The problem with this is that if they click in and then out, this leaves the text. To fix this, you can update clearMe() like this:

function clearMe2(formfield){
 if (formfield.defaultValue==formfield.value || formfield.value == "Use Me, Man!")
 formfield.value = ""
}

|| means "or" so we are comparing the value to the default value or the one we used to change it to.