输入

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

对于文本区域

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

对于一个纯基于CSS的解决方案:

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

注意: 尚未被所有浏览器供应商支持。

参考:Ilia Raiskin用CSS隐藏焦点上的占位符文本。

下面这段CSS对我来说很有用:

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

}

任何版本的Angular

只需将其添加到.css文件中

.hide_placeholder:focus::placeholder {
  color: transparent;
}

在课堂上使用

<input class="hide_placeholder"

纯CSS解决方案(不需要JS)

基于@Hexodus和@Casey Chu的回答，这里是一个更新的跨浏览器解决方案，利用CSS不透明和过渡淡出占位符文本。它适用于任何可以使用占位符的元素，包括文本区域和输入标记。

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; } /* Chrome <=56, Safari < 10 */ :-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */ ::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */ :-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */ ::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */ *:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */ *:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */ *:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */ *:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */ *:focus::placeholder { opacity: 0; } /* Modern Browsers */ <div> <div><label for="a">Input:</label></div> <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60"> </div> <br> <div> <div><label for="b">Textarea:</label></div> <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea> </div>

修正

编辑1(2017):更新以支持现代浏览器。 编辑2(2020):添加了可运行的堆栈片段。

为了进一步细化Wallace Sidhrée的代码示例:

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

这确保每个输入在data属性中存储正确的占位符文本。

在jsFiddle中可以看到一个工作示例。