問題自定義<input type =「search」...> jquery移動

Question

我想顯示消息「搜索」在ID爲「搜索」的字段中，並讓用戶點擊時消失。這是我的代碼。它不起作用。

<script> 
$('#acceuil').live('pagecreate',function(event){ 
$('#search').blur(function(){ 
    if ($('#search').val()=='') 
    $('#search').val("search"); 
}); 

$('#search').focus(function(){ 
    if (('#search').val()=='search') 
    $('#search').val(""); 
}); 
}); 
</script> 



<div data-role="page" id ="acceuil" > 
<div data-role="header" data-theme="a" ><h3>TEST</h3></div> 
<div data-role="content"> 
    <div data-role="container" > 
    <img src="images/olampromo.gif"> 
</div> 
<div data-role="container"> 
    <label for="search">Cherchez votre coupon :</label> 
    <input type="search" id="search" value="search">   
</div> 

</div> 
<div data-role="footer" data-theme="a" ><h3>footer</h3></div> 

Answer 1

您錯過了您的JS中的$。嘗試改變行：

if (('#search').val()=='search') 

到：

if ($('#search').val()=='search') 

你可以進一步通過利用this改善。 this將引用事件觸發的對象（即搜索元素）。因此，請嘗試：

if ($(this).val()=='search') 

相同的邏輯適用於模糊和焦點處理程序。

這是一個jsFiddle演示解決方案。

Answer 2

試試這個：

 $("#search").focus(function(srcc) { 
     var p_val = "Search"; 
     if ($(this).val() == p_val) { 
      $(this).val(""); 
     } 
    }); 

    $("#search").blur(function() { 
     var p_val = "Search"; 
     if ($(this).val() == "") { 
      $(this).val(p_val); 
     } 
    }); 

    $("#search").blur(); 

Answer 3

爲什麼不使用HTML5佔位符，原生屬性？沒有JS需要。

<input type="text" id="searchBox" placeholder="search..." /> 

活生生的例子：

• http://jsfiddle.net/phillpafford/TQYvT/1/