Question

I haven’t really found a great way to do this yet, so I figured I’d ask here – I have an text input search form field with a predefined value (Search…). When the user focuses, I’d like to clear that value out and when they blur, it should reset the text. I’ve been using javascript but the method I use seems like a lot of code for not much payoff, and I also have been putting the code in the element’s “onclick” handler, which I’d like to avoid, by keeping everything in jquery. If anyone has any good methods, let me know. Thanks!

Answer 1

First, use the placeholder attribute for any browser that supports it.

Then, check whether the attribute is supported; if not, use this fallback:

$('input[placeholder]').focus(function(ev){ 
  var $this = $(this);
  if ($this.val() === $this.attr('placeholder')) $this.val('');
}).blur(function(ev){
  var $this = $(this);      
  if ($this.val() === '') $this.val($this.attr('placeholder'));
});