Clear default text from input boxes using Javascript

Providing labels is a great way to help users interact with your website properly. I like to put instructional text inside text boxes to save space. Users get annoyed when the text inside the box they click on does not disappear when they are ready to type. Users do not want to backspace default instructional text before typing in boxes, so some code is required to make this happen.

I would like to share two small Javascript functions. The first clears out default text box contents automatically when a user clicks on the box. The second restores the default instructional text if the user leaves the box empty.

Implement these functions using onfocus=”wash(this);” and onblur=”checkWash(this);” on your text input control. You may want to avoid the second function on text fields where input is optional, so the user can leave the text box blank.

function wash( anInput ){
if(anInput.value == anInput.defaultValue) anInput.value = '';
}

function checkWash( anInput ){
if(anInput.value == '') anInput.value = anInput.defaultValue;
}

Try it

Look, I made a demo!