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

Question

我正在使用 jQuery 使用 HTML5 占位符的解决方法。唯一的问题是，如果我单击占位符 本身，输入字段不会变为活动状态。为了使其激活，我必须在输入内部但占位符外部单击。

这是一个 jsFiddle 显示发生了什么： http://jsfiddle.net/QXeQy/1/

如果我给跨度一个负的 z-index 它就消失了。我该如何解决这个问题？

Answer 1

你的跨度妨碍了你的输入。尝试添加以下内容：

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

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

Answer 2

使用 代替 span

<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();
    }
}