16

Chromeplaceholderでフォーカスのあるテキストをクリアする方法はありますか? Firefox はフォーカスのあるテキストをクリアしますが、Chrome はクリアしません。

これは、バーのテキストが入力されているか、それともプレースホルダー テキストであるか (テキストの色を薄い灰色に変更したとしても)、ユーザーを混乱させます。これには不要な JavaScript や jQuery を使用したくありません。これにはいくつかの HTML/CSS ソリューションがあります

デモフィドル

Chrome プレビュー(フォーカス時)

フォーカス時の Chrome プレビュー

Firefox プレビュー(オンフォーカス)

Firefox プレビュー オン フォーカス

4

5 に答える 5

47

使ってみて

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

それは問題を解決します。ページの読み込み時に自動フォーカスされるため、テキストはフォーカス時に表示されます。

于 2012-10-10T14:28:49.707 に答える
27

現在、Firefox は別の方法で動作するため、次のコードを使用しました。

input:focus::-webkit-input-placeholder{
    color: transparent!important;
}
input:focus::-moz-placeholder{
    color: transparent!important;
}
input:focus:-moz-placeholder{
    color: transparent!important;
}
于 2013-08-16T07:57:37.073 に答える
3

これは chrome がそれを処理する方法であり、chrome ユーザーはおそらくこのように処理されることを期待するでしょう。ただし、フォーカスされているときに jQuery を使用して「プレースホルダー」属性を削除することはできます。

Google グループ @ https://github.com/mathiasbynens/jquery-placeholder/issues/51#issuecomment-4193018から、明らかな修正を見つけました。

// Fixing Webkit that not clearing input/textarea when get focus
$(function(){
  if ($.browser.webkit) {
    $('input, textarea').on('focus',function(){
      if ( $(this).attr('placeholder') ) $(this).data('placeholder', $(this).attr('placeholder')).removeAttr('placeholder');
}).on('blur', function(){
        if ( $(this).data('placeholder') ) $(this).attr('placeholder', $(this).data('placeholder')).removeData('placeholder');
    });
  }
});
于 2012-10-10T14:27:52.633 に答える
-1

Shubhanshu の解決策がうまくいかないことがわかりましたが、これ は Chrome で機能するCSS トリックで見つかりましたが、FF では機能しないようです。

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}
于 2015-11-02T19:08:40.047 に答える