如何使用 css 或 jquery 在焦点上自动隐藏占位符文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9707021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I auto-hide placeholder text upon focus using css or jquery?
提问by LondonGuy
This is done automatically for every browser except Chrome.
这对于除Chrome之外的每个浏览器都会自动完成。
I'm guessing I have to specifically target Chrome.
我猜我必须专门针对Chrome。
Any solutions?
任何解决方案？
If not with CSS, then with jQuery?
如果不使用CSS，那么使用jQuery？
Kind regards.
亲切的问候。
回答by Rob Fletcher
Edit: All browsers support now
编辑：现在所有浏览器都支持
input:focus::placeholder {
color: transparent;
}<input type="text" placeholder="Type something here!">Firefox 15 and IE 10+ also supports this now. To expand on Casey Chu's CSS solution:
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+ */
回答by MatuDuke
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
回答by Casey Chu
Here is a CSS-only solution (for now, only works in WebKit):
这是一个仅限 CSS 的解决方案（目前，仅适用于 WebKit）：
input:focus::-webkit-input-placeholder {
opacity: 0;
}
回答by JamesWilson
Pure CSS Solution (no JS required)
纯 CSS 解决方案（不需要 JS）
Building on @Hexodus and @Casey Chu's answers, here is an updated and cross-browser solution that leverages CSS opacity and transitions to fade the placeholder text out. It works for any element that can use placeholders, including textareaand inputtags.
基于@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 */
Edit: Updated to support modern browsers.
编辑：更新以支持现代浏览器。
回答by Toni Michel Caubet
have you tried placeholder attr?
你试过占位符 attr 吗？
<input id ="myID" type="text" placeholder="enter your text " />
-EDIT-
-编辑-
I see, try this then:
我明白了，试试这个：
$(function () {
$('#myId').data('holder', $('#myId').attr('placeholder'));
$('#myId').focusin(function () {
$(this).attr('placeholder', '');
});
$('#myId').focusout(function () {
$(this).attr('placeholder', $(this).data('holder'));
});
});
Test: http://jsfiddle.net/mPLFf/4/
测试：http: //jsfiddle.net/mPLFf/4/
-EDIT-
-编辑-
Actually, since placeholder should be used to describe the value, not the name of the input. I suggest the following alternative
实际上，因为占位符应该用于描述值，而不是输入的名称。我建议以下替代方案
html:
html：
<label class="overlabel">
<span>First Name</span>
<input name="first_name" type="text" />
</label>
javascript:
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:
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;
}
Test:
测试：
回答by Adrian F?der
To augment @casey-chu's and pirate rob's answer, here's a more cross browser compatible way:
为了增加@casey-chu 和海盗 rob 的回答，这里有一种更跨浏览器兼容的方式：
/* 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; }
回答by Wallace Sidhrée
Toni's answer is good, but I'd rather drop the IDand explicitly use input, that way all inputs with placeholderget the behavior:
Toni 的回答很好，但我宁愿放弃ID并明确使用input，这样所有输入placeholder都会得到行为：
<input type="text" placeholder="your text" />
Note that $(function(){ });is the shorthand for $(document).ready(function(){ });:
请注意，这$(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'));
});
})
回答by martinedwards
I like to package this up in the name space and run on elements with the "placeholder" attribute...
我喜欢将其打包在名称空间中并在具有“占位符”属性的元素上运行...
$("[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'));
});
});
};
回答by Mahdi Alkhatib
Sometimes you need SPECIFICITYto make sure your styles are applied with strongest factor idThanks for @Rob Fletcher for his great answer, in our company we have used
有时你需要特异性，以确保您的样式应用于与最强的因素id感谢@Rob弗莱彻对他的伟大的答案，在我们公司，我们已经使用
So please consider adding styles prefixed with the id of the app container
所以请考虑添加以应用容器的 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;
}回答by Muhammad Bilawal
With Pure CSS it worked for me. Make it transparent when Entered/Focues in input
使用 Pure 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;
}
