演示在这里:jsfiddle

试试这个:

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。

例如，在下面的邮箱中，点击里面的占位符文字会消失，点击外面的文字会重新出现。

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

如果您的输入背景颜色是白色，那么您可以将占位符文本的颜色设置为焦点，以匹配输入背景-使文本不可见;从理论上讲。如果你的输入是不同的颜色，那么只需简单地改变颜色以匹配它。

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

此外，您可以将颜色设置为“透明”，如其他答案所示。

编辑: 现在所有浏览器都支持

输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">

Firefox 15和IE 10+现在也支持这个功能。要扩展Casey Chu的CSS解决方案:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

有时你需要特异性来确保你的风格应用于最强的因素id，谢谢@Rob Fletcher的精彩回答，在我们公司我们使用过

因此，请考虑添加带有应用程序容器id前缀的样式

#app input:focus::-webkit-input-placeholder， #app textarea:focus::-webkit-input-placeholder { 颜色:# FFFFFF; ｝ #app input:focus:-moz-placeholder， #app textarea:focus:-moz-placeholder { 颜色:# FFFFFF; ｝

我喜欢将其打包到名称空间中，并在带有“占位符”属性的元素上运行……

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};