テキスト ボックスの入力フォーカスとデフォーカス スタイルの実装 code_javascript スキル

まず、CSS 疑似クラスを使用します。フォーカスを変更できます。

テキスト ボックスの HTML コードは次のように想定されます。

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

名前:

パスワード:

テキストエリア:

CSS コードは次のように記述されます。 >

input[type="text" ]:focus, input[type="password"]:focus, textarea:focus { border: 1px Solid #f00; }
テキスト ボックス、パスワード ボックス、段落ボックスがそれぞれフォーカスされているときの 3 つの入力ボックスのスタイルが表示されます。赤い枠線と灰色の背景を追加します。

今すぐ解決するのは簡単ですか?ブラウザ (Firefox、Safari、IE7) を使用してテストします。すべて問題ありませんが、IE6 はサポートされていません。

IE6 で同じ美しい効果を得たい場合は、js を使用する必要があります。あなたのためのエフェクトを作成します。




コードをコピー

コードは次のとおりです。 $(document).ready(function( ){ $("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"# ccc", border:"1px Solid #f00"})} );

});

jqueryの作り方ってすごく簡単じゃないですか? cssの書き方に似てる気がします！

これは単なるフォーカス状態です。jquery のフォーカスが外れている状態では、指示を与える必要があります。それ自体では元に戻らないので、アウトオブフォーカス状態を追加します。フォーカス状態。

コードをコピー

コードは次のとおりです。 $(document).ready(function( ){ $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"# ccc", border: "1px ソリッド #f00"})}).blur(function(){$(this).css({background: "#FFF", border: "1px ソリッド #ccc"})});

})

デフォーカス後、背景の端は白になり、境界は灰色になります。

もちろん、jquery の addClass と RemoveClass を使用してコードを簡素化することもできます。

コードをコピーします

コードは次のとおりです: $(document).ready(function(){ $("input[@type='text'], input[@type='password'], textarea").focus (function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});

})

まず、入力ボックスにデフォルトのスタイルを与えます。フォーカスされている場合は、addClass を使用して CSS の「フォーカス」を追加します。フォーカスが外れている場合は、removeClass を使用して CSS の「フォーカス」を削除します。

すべて完了しました!