Chrome でフォーカス上のプレースホルダー テキストを削除するにはどうすればよいですか?

CSS または jQuery を使用してフォーカスされたプレースホルダー テキストを削除する

テキスト フィールドにテキストを入力すると、通常、プレースホルダー テキストが消えて、ユーザーの入力。ほとんどのブラウザはこれを自動的に行いますが、Chrome は行いません。

CSS ソリューション

特に Chrome をターゲットにするには、input:focus::placeholder セレクターを使用できます:

input:focus::placeholder {
  color: transparent;
}

この CSS ルールは、入力フィールドが入力されている場合にプレースホルダー テキストを透明に設定します。 focus.

jQuery ソリューション

jQuery を使用してこれを実現することもできます。

$("input").on("focus", function() {
  $(this).attr("placeholder", "");
});

$("input").on("blur", function() {
  $(this).attr("placeholder", "Type something here!");
});

この jQuery コードは、プレースホルダー テキストを空の文字列に設定します。入力フィールドにフォーカスがある場合、フィールドが失われると目的のテキストに復元します。 focus.

ブラウザのサポート

更新:

すべての最新のブラウザは、次の入力を使用してフォーカス上のプレースホルダー テキストを非表示にすることをサポートするようになりました。 focus::placeholder CSS セレクター。したがって、jQuery ソリューションは必要なくなりました。

以上がChrome でフォーカス上のプレースホルダー テキストを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。