jquery検索ボックス効果の実装method_jquery

この記事の例では、jquery 検索ボックス効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
$(関数(){
$('#search').val("検索内容を入力してください").addClass("c1");
$('#search').focus(function(){//検索ボックスがフォーカスを取得したとき
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//検索ボックスがフォーカスを失ったとき
If($('#search').val()==""){
$('#search').val("検索内容を入力してください").attr("class","c1");
}
});
});




検索

補足: 完全ではありませんが、検索ボックスが元々他のスタイルを持っていた場合、例のコードを使用すると、attr() でスタイルを設定するため、フォーカスを失ったときに他のスタイルが消えてしまいます。 addClass() を使用してスタイルを追加する場合、効果は得られますが、元の c2 スタイルはそのまま残り、表示されるときに c1 スタイルに置き換えられるだけです (これには c1 スタイルが必要です)。 c2) の後に記述します。スタイルを置き換える方法はないようですか？

修正後、上記の問題は解決され、より完璧なバージョンになります (コードを最適化して簡素化することもできます)

コードをコピー コードは次のとおりです:

<頭>


<スクリプトタイプ="text/javascript">
$(関数(){
$('#search').val("検索内容を入力してください").addClass("c1");
$('#search').focus(function(){//検索ボックスがフォーカスを取得したとき
If($('#search').val()=="検索内容を入力してください"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//検索ボックスがフォーカスを失ったとき
If($('#search').val()==""){
$('#search').val("検索内容を入力してください").addClass("c1").removeClass("c2");
}
});
});




検索

この記事が皆さんの jQuery プログラミングに役立つことを願っています。