Search Field Focus & Blur Effects with  jQuery

There is a newer version of this post available called Form input field focus & blur effects

Here is something I come across a lot at work so I thought I would turn it into a simple tutorial for reference to anyone out there that needs it. Basically what we want to create is this:

  • A search field that will display a value such as “Enter your search terms here.”
  • When a user clicks into that field the value will disappear, allowing the user to enter there search terms.
  • If a user clicks out of that search field without entering anything, the default value will return to the field.

This is a simple little JavaScript task, and with the help of the jQuery library, it’s even simpler and completely unobtrusive. Because sometimes you just want a bear bones version to work with, I’ll keep the styles to a minimum on this one. Here’s how we go about doing it.

First we need to start with a basic form structure

<form id="search-form" action="">
  <label for="search-input">Click here to search</label>
  <input type="text" id="search-input" name="search-input" value="" />
  <input type="button" id="submit" value="Go" />
  <div class="clearboth"></div>
</form>

For semantic purposes, and for all those without JavaScript enabled, I’ve added the label attribute in there. What we’re going to do is pull the text from the label and then hide it. After that we’ll put that text into the input’s value attribute. This way if a user has JavaScript turned off they will simply see a label and a search input.

jQuery Magic

Next we need to add some of that jQuery magic to spice things up. For those of you who are here simple to grab some code and get to work, I’ll post the JavaScript up front and explain step by step afterwards. Here goes:

$(document).ready(function(){
  // Get the text from the label element
  var labelTxt = $('#search-form label').text();
  // Put the text from the label element into the search field's value  
  $('#search-input').attr('value',labelTxt);
  // Focus & blur effects
  $('#search-input').focus(function(){
    if ((this.value == '') || (this.value == labelTxt)) {
      $(this).val('');
    }
  });
  $('#search-input').blur(function(){
    if (this.value == '') {
      $(this).val(labelTxt);
    }
  });
  // On submit change the value while server side code is run
  $("#submit").click(function(){
    $('#search-input').attr('value','Searching...');    
  });
});

So we start inside a $(document).ready() with a nested function as an argument so that your code will load after the document does. This allows for the unobtrusive targeting of elements, if you don’t run your code after the document’s load event there won’t be anything for JavaScript to work with.

First we need to grab the text from inside the Label element and store it in a variable. I’ve called that variable labelTxt. Next we’ll set the search input’s value attribute equal to the contents of the labelTxt variable using the attr() method.

Now we need to setup two functions. One for onfocus, an event that is triggered when a user selects a form field, and another for onblur, an event that is triggered when a user leaves that selected field (or de-selects it).

We use jQuery’s focus() method to nest a function that will set the value to be blank. Next we’ll use the blur() method to put the contents of the labelTxt variable (that we defined earlier) back into the value attribute of the search input.

As an added bonus you can use the submit() method to change the value to “Searching…” when the user hit’s the search button. This gives the user some instant feedback, hopefully letting them know that they’ve submitted there information and it’s time to chill while the server does it’s thing.

Working Example

See a working example

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.