单击占位符不会使输入处于活动状态

Question

我正在使用jQuery来解决HTML5占位符问题。唯一的问题是，如果我单击占位符<span>本身，输入字段不会变为活动状态。要使它变为活动状态，我必须在输入内部单击，但在占位符之外。

这是一个显示正在发生的事情的jsFiddle：http://jsfiddle.net/QXeQy/1/

如果我给出一个负数z-index，它就会消失。我该如何解决这个问题？

Answer 1

你的跨度阻碍了你的输入。尝试添加：

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

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

Answer 2

而不是跨度使用<label>

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

然后使用此javascript：

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

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