問題のカスタマイズの<input type = ...「検索」> 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です。 HTML5ネイティブplaceholder属性を使用しないのはなぜ

 $("#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 2

はこれをみては？ JSは必要ありません。

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

ライブ例：

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

Answer 3

：