フォーカス時にプレースホルダー テキストを非表示にする方法: CSS と jQuery?

フォーカス時のプレースホルダー テキストの非表示: CSS または jQuery ソリューション

フォーカス時のプレースホルダー テキストの自動非表示は、Chrome を除くすべてのブラウザーでネイティブにサポートされています。この機能を実現するには、特に Chrome をターゲットにする必要がある場合があります。以下にいくつかの解決策を示します。

CSS ベースのソリューション

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

jQuery ベースのソリューション

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

$('input').on('blur', function() {
  var placeholder = $(this).attr('placeholder-text');
  if (!placeholder) {
    placeholder = $(this).attr('placeholder');
  }
  $(this).attr('placeholder', placeholder);
});

メモ上記の CSS ソリューションは、Chrome を含むすべての最新ブラウザでサポートされるようになりました。ただし、jQuery ソリューションは、フォーカスを失ったときにカスタム プレースホルダー メッセージを提供するなど、一部のシナリオでは依然として役立つ場合があります。

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