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

【问题标题】：Clicking placeholder doesn't make input active单击占位符不会使输入处于活动状态
【发布时间】：2011-10-04 01:11:34
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

您的跨度妨碍了您的输入。尝试添加：

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

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

【讨论】：

【解决方案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();
    }
}

【讨论】：