除 Chrome 以外，每个浏览器都会自动完成此操作。
我猜我必须专门针对 Chrome 。
任何解决方案？
如果不是 CSS ，那么使用 jQuery ？
答案 0 :(得分：397)
Firefox 15和IE 10+现在也支持这一点。扩展Casey Chu的CSS solution：
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+ */
答案 1 :(得分：227)
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
答案 2 :(得分：72)
这是一个仅限CSS的解决方案（目前仅适用于WebKit）：
input:focus::-webkit-input-placeholder {
opacity: 0;
}
答案 3 :(得分：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;
}
测试：
答案 4 :(得分：35)
在@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 */
编辑：已更新以支持现代浏览器。
答案 5 :(得分：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; }
答案 6 :(得分：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'));
});
})
<强> Demo.
答案 7 :(得分：10)
我喜欢在名称空间中打包它，并使用＆＃34;占位符＆＃34;运行元素。属性...
$("[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'));
});
});
};
答案 8 :(得分：5)
有时您需要 SPECIFICITY 以确保您的样式应用最强因子id感谢@Rob Fletcher的出色答案，我们公司使用过
因此，请考虑添加前缀为应用容器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;
}
答案 9 :(得分：4)
进一步细化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'));
});
})
这可确保每个输入在数据属性中存储正确的占位符文本。
答案 10 :(得分：4)
我喜欢用转换调味的css方法。在焦点上占位符淡出;）也适用于textareas。
感谢@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;
}
答案 11 :(得分：4)
使用SCSS和http://bourbon.io/，此解决方案简单，优雅，适用于所有Web浏览器：
input:focus {
@include placeholder() {
color: transparent;
}
}
使用波旁威士忌！这对你有好处！
答案 12 :(得分：3)
使用纯CSS可以为我工作。输入时/输入时使其透明
function load() {
$.ajax({
url: "/EventController/Event",
type: "GET",
success: function (eventData) {
// load the popup
// with necessary data
setTimeout(load, 1000*60*10); // calls the same method in another 10 mins
},
error: function (jqXHR) {
setTimeout(load, 1000*60*10);
}
});
}
答案 13 :(得分：3)
这条CSS对我有用：
input:focus::-webkit-input-placeholder {
color:transparent;
}
答案 14 :(得分：3)
对于基于纯CSS的解决方案：
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
注意： 尚未得到所有浏览器供应商的支持。
参考：Ilia Raiskin的Hide placeholder text on focus with CSS。
答案 15 :(得分：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');
});
答案 16 :(得分：2)
2018＆gt; 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);
};
});
});
答案 17 :(得分：1)
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
for textarea
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
答案 18 :(得分：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");
});
});
答案 19 :(得分：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'));
});
答案 20 :(得分：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'));
});
});
}
答案 21 :(得分：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，我的英语很差。希望解决你的问题。
答案 22 :(得分：0)
尝试此功能：
+它将PlaceHolder隐藏在焦点并将其返回模糊
+此功能取决于占位符选择器，首先它选择具有占位符属性的元素，在聚焦时触发功能，另一个在模糊处理。
焦点：它添加了一个属性＆＃34;数据文本＆＃34;对于从占位符属性获取其值的元素，它将删除占位符属性的值。
on blur：它返回占位符值并将其从data-text属性中删除
<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', '');
});
});
答案 23 :(得分：0)
library(ggplot2)
library(cowplot)
Value <- seq(0,1000, by = 1000/10)
Index <- 0:10
DF <- data.frame(Index, Value)
plot1 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot2 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot3 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot4 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot5 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot6 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
plot7 <- ggplot(DF, aes(x = Index, y = Value)) +
geom_line(linetype = 2) +
theme(aspect.ratio = 0.5)
col1 <- plot_grid(plot1, plot2, plot3, align = "v", ncol = 1)
col2 <- plot_grid(plot4, plot5, plot6, plot7, align = "v", ncol = 1)
plot_grid(col1, col2, ncol = 2, align = "hv")
答案 24 :(得分：0)
我在角5中应用了同样的东西。
我创建了一个用于存储占位符的新字符串
newPlaceholder:string;
然后我在输入框上使用了焦点和模糊功能（我使用的是自动完成功能）。
上面的占位符是从typescript
设置的我正在使用的两个功能 -
/* 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;
}
答案 25 :(得分：0)
无需使用任何CSS或JQuery。您可以直接从HTML输入标签执行此操作。
例如，在电子邮件下面的内部，占位符文本在单击内部后消失，而在外部单击则再次出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
答案 26 :(得分：0)
如果您的输入背景颜色是白色，那么您可以设置焦点上的占位符文本颜色以匹配输入背景 - 使文本不可见；理论上。如果您输入的是不同的颜色，那么只需更改颜色以匹配它即可。
input:focus::placeholder {
color: white;
}
此外，您可以将其他答案中显示的颜色设置为“透明”。