jquery検索ボックス効果の実装method_jquery-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:19:55

オリジナル

1565 人が閲覧しました

この記事の例では、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 プログラミングに役立つことを願っています。