Question

I was trying to clear input text using onfocus and onblur inside the input tag, but I’m going to use it on many fields so I found this JQuery function but I can’t seem to make it work.

$('.default-value').each(function() {

   var default_value = this.value;

   $(this).focus(function(){
           if(this.value == default_value) {
                   this.value = '';
           }
   });

   $(this).blur(function(){
           if(this.value == '') {
                   this.value = default_value;
           }
   }); 
});

I tried putting this inside script tag inside the head tag, and I added a class of default-value to the inputs I want to clear but it doesn’t work.

so what am I doing wrong ? I don’t know javascript and I’m linking to the latest JQuery.

and thanks

Answer 1

Seems like you’re re-inventing @placeholder here.

Just use HTML like this:

<input type="text" placeholder="foo bar">

This is supported in most modern browsers.

Then, use a polyfill to make sure older browsers get similar behavior. I’ve written one in jQuery plugin format, if you’re interested: http://mths.be/placeholder

Use it as follows:

$('input, textarea').placeholder();

Here’s a demo: http://mathiasbynens.be/demo/placeholder