ホームページ  >  記事  >  ウェブフロントエンド  >  jquery検索ボックス効果の実装method_jquery

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

WBOY
WBOYオリジナル
2016-05-16 16:19:551493ブラウズ

この記事の例では、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) の後に記述します。スタイルを置き換える方法はないようですか?

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

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

<頭>
jquery: 検索ボックスの効果

<スクリプトタイプ="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 プログラミングに役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。