Clicking placeholder doesn't make input active

I am using a work-around for HTML5 placeholder using jQuery. The only problem is that if I click on the placeholder <span> itself, the input field doesn't become active. For it to become active I have to click inside the input but outside of the placeholder.

Here is a jsFiddle showing what's go开发者_如何学运维ing on: http://jsfiddle.net/QXeQy/1/

If I give the span a negative z-index it disappears. How can I fix this?

Your span is in the way of your input. Try adding this:

$("span.holder").click(function() {
    $(this).next().focus();
});

http://jsfiddle.net/QXeQy/2/

instead of span use <label>

<label for="search">Placeholder text</label><input type="search" name="search" id="search" />

and then use this javascript:

$('#search').focus(function(){
  $('label[for=search]').hide();
}

$('#search').blur(function(){
  if($('#search').val() == '' )
    {
      $('label[for=search]').show();
    }
}