Remove/add value onfocus/onblur if empty in jquery, input field

Question

I know there exists many questions about this, but I dont know what to search.

I have a email field, and I want it to have "Write your email here" and when you click/do onfocus it should disappear. Although if you did not write something and go onblur it should appear again.

Answer 1

1. Markup

<input id="email" name="email" type="text" value="Write your email here" />

2. jQuery

$('#email')
  .on('focus', function(){
      var $this = $(this);
      if($this.val() == 'Write your email here'){
          $this.val('');
      }
  })
  .on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          $this.val('Write your email here');
      }
  });​

3. Demo

jQuery input placeholder

Answer 2

You should use HTML5 placeholder instead and use a jquery plugin for older browsers
http://diveintohtml5.ep.io/forms.html

Running example here:
http://jsfiddle.net/AamkB/

There are a lot of jquery plugins for placeholder, i used this one:
http://webcloud.se/code/jQuery-Placeholder/

Answer 3

You can use the inline JavaScript tags onblur / onfocus . Maybe not the most 'clean' HTML code but it certainly works in all browsers! (Didn't try IE5.5 / 6.0, but hey, who is using these oldies nowadays?! ^_^)

<input type="text" name="aSweetInputField" value="Your textfield value" 
class="anyClass"  onclick="if (this.defaultValue==this.value) this.value=''" 
onblur="if (this.value=='') this.value=this.defaultValue">

That's it!