Chrome でフォーカスがあるときにプレースホルダー テキストが保持されるのはなぜですか?それを修正するにはどうすればよいですか?

CSS と jQuery を使用して Chrome の自動フォーカス プレースホルダーの不具合を克服する

HTML でプレースホルダー テキストを操作する場合、よく問題が発生します。入力フィールドがフォーカスを取得した場合でも、プレースホルダー テキストは表示されたままになります。 Firefox、Safari、Edge などのブラウザはこれを適切に処理し、プレースホルダー テキストを自動的に非表示にします。ただし、Chrome ではこれに失敗することがよくあります。

Chrome でのこの特定の問題に対処するには、CSS または jQuery を利用できます。次の CSS ルールを使用すると、入力フィールドがフォーカスを受け取ったときにプレースホルダー テキストを透明にすることができます:

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

この CSS 宣言は、特に入力フィールドがフォーカスされているときにプレースホルダー テキストをターゲットにします。色を透明に設定すると、プレースホルダー テキストは実質的に非表示になります。

jQuery ソリューションを使用したい場合は、次のコードを使用できます。

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

  $("input[placeholder]").blur(function() {
    $(this).attr("placeholder", $(this).attr("data-placeholder"));
  });
});

この jQuery コードでは、リッスンします。プレースホルダー属性を持つ入力要素のフォーカス イベントとブラー イベントの場合。フォーカスが得られると、プレースホルダー属性がクリアされ、プレースホルダー テキストが非表示になります。フォーカスが失われた場合、初期化時に設定した data-placeholder 属性に格納されている値にプレースホルダー属性を設定することで、プレースホルダー テキストを復元します。

CSS ソリューションと jQuery ソリューションは両方とも、プレースホルダー テキストを効果的に自動的に非表示にします。 Chrome では入力フィールドがフォーカスされると、すべてのブラウザで一貫したユーザー フレンドリーなエクスペリエンスが保証されます。

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