如何使用CSS或jquery自动隐藏占位符文本？

213

除Chrome之外的所有浏览器都会自动执行此操作。

我猜我必须专门针对Chrome。

有什么办法吗？

如果不使用CSS，那么使用jQuery？

亲切的问候。

jquery  css  html  google-chrome  placeholder 
— 伦敦人
source
然后查看我的编辑，可能会有所帮助
— Toni Michel Caubet 2012年
Opera还是另一个浏览器，它可以消除占位符的焦点。
— 卢卡斯
从15版开始，Firefox不再删除占位符文本，直到您开始输入为止。我相信IE10可能也是如此，但我没有办法验证这一点。
— 罗布·弗莱彻
1
我担心没有人提到您不应该修改本地浏览器行为的事实。我一个更喜欢占位符仍然存在。它只是对最终用户的帮助，并且它是浏览器现在开始实现的功能……可能是因为焦点消失行为被证明是一个可用性问题。请让浏览器成为。
— Ryan Wheale 2013年
“除Chrome浏览器外，所有其他浏览器都会自动完成此操作。” 不再？我刚刚在OSX的Firefox 37.0.2，Safari 7.1.5和Chrome 42.0中进行了尝试。在我开始键入之前，没有一个删除占位符文本，并且当我清除该字段时，所有这些都将其放回去。
— 内森·朗

Answers:

261 
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
— 马杜克
source
2
这样就可以了，但是当我单击远离字段时，它保持空白。
— LondonGuy 2012年
2
@LondonGuy：刚刚编辑了我的帖子，看看它是否如您所愿。但是Toni Michel Caubet的解决方案更好
— MatuDuke 2012年
9
这里的问题是这是令人讨厌的JavaScript。Toni Michel Caubet的解决方案更好。
— Silkster，2013年
我喜欢它，但不幸的是，它既不支持IE也不能使用Safari。
— Mohammed Moustafa 2015年
— 它是我
455

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

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">
展开摘要

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+ */
— 罗布·弗莱彻
source
1
好答案！我放弃旧的jQuery解决方案而改用HTML5，然后继续添加JavaScript作为修复程序，并没有多大意义。这只是我一直在寻找的解决方案。
— 2013年
@MartinHunt您在FF上尝试过此吗？输入：focus ::-moz-placeholder
— Philip
16
为疏通旧线程而道歉，但仅是为了使其更加完整：input：focus：-moz-placeholder适用于Firefox 18及以下版本，从19开始，您需要使用：input：focus ::-moz-placeholder（注意双冒号）。参考：css-tricks.com/snippets/css/style-placeholder-text
— 彼得·刘易斯
这个评论是一个胜利。与剑道一样的动态控件一起使用
— reflog 2015年
1
我也很高兴回答！对于那些在禁用该字段时可能也需要此功能的人来说，以下是CSS代码：/ *在禁用保留字段时隐藏占位符文本（如果有）* / input：disabled ::-webkit-input-占位符{颜色：透明；} input：disabled：-moz-placeholder {color：transparent; } input：disabled ::-moz-placeholder {color：transparent; } input：disabled：-ms-input-placeholder {color：transparent; }
— Ramanagom
74

这是仅CSS的解决方案（目前仅适用于WebKit）：

input:focus::-webkit-input-placeholder {
    opacity: 0;
}
— 朱
source
1
我喜欢这个答案，但是浏览器对它的支持还不存在。
— 杰里
44

纯CSS解决方案（无需JS）

在@Hexodus和@Casey Chu的答案的基础上，这是一个更新的跨浏览器解决方案，该解决方案利用CSS不透明性和过渡效果来淡化占位符文本。它适用于可以使用占位符的任何元素，包括textarea和input标签。

::-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 */

编辑：更新为支持现代浏览器。

— 詹姆斯·威尔森
source
6
最好的CSS解决方案！
— 法提赫·萨里
好的旧CSS ...很棒的简单解决方案！我为什么没想到呢？
— JI-Web
40

您是否尝试过占位符attr？

<input id ="myID" type="text" placeholder="enter your text " />

-编辑-

我知道了，然后尝试以下操作：

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

测试：http：//jsfiddle.net/mPLFf/4/

-编辑-

实际上，由于应该使用占位符来描述值，而不是输入名称。我建议以下替代方案

的HTML：

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript：

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

CSS： 

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

测试：

http://jsfiddle.net/kwynwrcf/

— 托尼·米歇尔·考贝特
source
很高兴看到正在使用的数据属性。但是我会看一下CSS等效项。缓存后，它将是一个更快的解决方案，并且可以是全局的。上面的内容需要将data属性放置在所需的每个元素上。（以下答案）
— Neil 2014年
1
这太复杂了。可以用更少的代码来完成。
— JGallardo
@JGallardo给我看光（但是我不确定你是否看到3种不同的解决方案）
— Toni Michel Caubet
19

为了扩大@ casey-chu和海盗抢夺的答案，这是一种更兼容跨浏览器的方式：

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }
— 阿德里安·佛德（AdrianFöder）
source
正是我现在写的（而不是我使用的opacity:0;）！该线程中唯一具有所有可能的浏览器支持的CSS解决方案！
— ReynekeVosz 2015年
11

Toni的答案很好，但是我宁愿删除ID和显式使用input，那样所有输入都具有placeholder行为：

<input type="text" placeholder="your text" />

请注意，这$(function(){ });是$(document).ready(function(){ });：

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

演示

— 华莱士·西德瑞（WallaceSidhrée）
source
3
如果您有多个字段，则此方法无效。这是您的代码的增强版jsfiddle.net/6CzRq/64
— svlada 2014年
10

我喜欢将其打包在名称空间中，并在具有“ placeholder”属性的元素上运行...

$("[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'));
        });
    });
};
— 马丁
source
5

有时你需要特异性，以确保您的样式应用于与最强的因素id感谢@Rob弗莱彻对他的伟大的答案，在我们公司，我们已经使用

因此，请考虑添加以应用容器ID为前缀的样式

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }
展开摘要

— 马赫迪（Mahdi Alkhatib）
source
5

使用纯CSS可以为我工作。输入时/输入时使其透明

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }
— 穆罕默德·比拉瓦尔（Muhammad Bilawal）
source
4

为了进一步完善WallaceSidhré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中查看一个工作示例。

— 真实音调
source
4

我喜欢css的方法，特别注重过渡效果。在焦点上，占位符逐渐消失；）也适用于文本区域。

感谢@Casey Chu的好主意。

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}
— 六足纲
source
4

结合使用SCSS和http://bourbon.io/，此解决方案简单，优雅，并且可在所有Web浏览器上使用：

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

使用波旁威士忌！这是对你有好处 ！

— 麦可
source
3

这段CSS对我有用： 

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

}
— 亚历克斯·邦德
source
1
这是不使用JQuery的一种不错的方法：）
— tehX
2

HTML：

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery的：

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});
— 乌菲
source
1
这仅假设一个输入。
— 2015年
2

2018> JQUERY v.3.3解决方案：全局 工作于所有输入，带占位符的textarea。

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});
— Karel SniperŽák
source
1

演示在这里：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'));
            });

        });

}
— 苏雷什·帕图（Suresh Pattu）
source
使用$（“ input [placeholder]”）来仅选择具有占位符属性的字段。
— Silkster，2013年
这是最好的答案，很简单，并且在焦点
— 模糊
1

用于输入

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

用于textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
— 瓦格
source
1 
$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});
— 奥斯本
source
1 
$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});
— 哈迪
source
0

除了上述所有以外，我还有两个想法。

您可以添加一个模仿palceholder的元素。然后使用javascript控制该元素的显示和隐藏。

但是它是如此复杂，另一个正在使用兄弟的css选择器。就像这样：

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; }
展开摘要

23333，我英语不好。希望能解决您的问题。

— 杜菲蒙
source
请检查此URL，这对提高您的内容质量将是有用的;
— 郑威（Willie Cheng）
0

试试这个功能：

+它会将PlaceHolder隐藏在焦点上，并在模糊时将其返回

+此功能取决于占位符选择器，首先它选择具有占位符属性的元素，触发一个聚焦功能，另一个触发模糊功能。

重点关注：它向元素添加属性“数据文本”，该元素从占位符属性获取其值，然后删除占位符属性的值。

在模糊时：它将返回占位符值，并将其从数据文本属性中删除

<input type="text" placeholder="Username" />
$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

如果您通过检查输入元素来了解幕后发生的情况，则可以很好地跟随我

— 威尔·阿萨夫（Wael Assaf）
source
0

我在角度5中应用了相同的内容

我创建了一个用于存储占位符的新字符串

newPlaceholder:string;

然后我在输入框上使用了聚焦和模糊功能（我正在使用自动完成功能）。

以上占位符是从打字稿设置的

我正在使用的两个功能-

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}
— 罗希特·格罗弗（Rohit Grover）
source
0

无需使用任何CSS或JQuery。您可以直接从HTML输入标签执行此操作。

例如，在下面的电子邮件框中，占位符文本在内部单击后将消失，而在外部单击则再次出现。

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
— 赛义伊斯兰教
source
-1 
/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }
— maPer77
source
该答案与先前的答案相同。如果您有什么要补充或改进的地方，请建议对原始答案进行修改。
— JonathanDavidArndt
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.