單擊佔位符不會使輸入有效

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