Chrome でフォーカス時にプレースホルダー テキストを自動的に非表示にする方法

フォーカス時にプレースホルダー テキストを自動非表示にする: 包括的なガイド

入力フィールドにプレースホルダー テキストを追加する場合、ブラウザーは通常、ユーザー フォーカス時にそれを非表示にします。 。ただし、Chrome ではこの動作に対して例外が発生します。この問題に効果的に対処するために、CSS と jQuery の両方を使用して考えられる解決策を検討してみましょう。

CSS ソリューション

<br>input:focus::placeholder { <br> color:transparent;<br>}<br>

この CSS ルールは、入力フィールドがフォーカスを受け取ったときにプレースホルダー テキストを特にターゲットにし、透明にします。その結果、プレースホルダー テキストがフェードアウトし、目的の自動非表示動作をシミュレートします。

jQuery ソリューション

ほとんどのブラウザーでは CSS ソリューションで十分ですが、jQuery は代替手段を提供します。さらにカスタマイズするためのアプローチ:

<br>$(function() {<br> $("input").focus(function() {<pre class="brush:php;toolbar:false">$(this).attr("placeholder", "");

} ).blur(function() {

$(this).attr("placeholder", "Type something here!");

});
});

この jQuery スクリプトは、フォーカス イベントとブラー イベントをリッスンします。入力フィールドで。フィールドがフォーカスを取得すると、そのプレースホルダー属性がクリアされ、プレースホルダー テキストが表示されなくなります。逆に、フィールドがフォーカスを失うと、プレースホルダー テキストが復元されます。

結論

CSS または jQuery を使用するかどうかに関係なく、提供されたソリューションの 1 つを実装することで、効果的に次のことができます。フォーカスされたプレースホルダー テキストの自動非表示を実現し、Chrome を含むさまざまなブラウザーでのユーザー エクスペリエンスを向上させます。

以上がChrome でフォーカス時にプレースホルダー テキストを自動的に非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。