Clear Input Field When Selected

If you have tried searching for something on our blog, you might have noticed an interesting little thing. Once you click on the search input field, it clears up. Then, once you deselect it, it fills up with the default value again. This useful effect can be achieved with a very simple JavaScript code (containing just two short functions). Here it goes (you can see it in the header part of the source code, too):

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
  if (thisfield.value == defaulttext) {
    thisfield.value = "";
  }
}
function clickrecall(thisfield, defaulttext) {
  if (thisfield.value == "") {
    thisfield.value = defaulttext;
  }
}
</script>

Now you will need to adjust your input field a bit. Don’t worry, it’s simple. You will only need to add a default value few times. For example, bellow is code of our search input field (the default value is Search our blog…).

<input type="text" value="Search our blog..." name="s" id="s" onclick="clickclear(this, 'Search our blog...')" onblur="clickrecall(this, 'Search our blog...')" />

That’s it. Pretty simple, don’t you think?