我如何自动隐藏占位符文本的焦点使用css或jquery?

这是自动完成的每个浏览器，除了Chrome。

我猜我必须专门针对Chrome。

有解决方案吗?

如果不是用CSS，那么用jQuery?

373656 次浏览
小开

你试过占位符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/

小开
最佳答案 
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
小开

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');
});
小开

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.

小开

这是一个css的解决方案(目前，只适用于WebKit):

input:focus::-webkit-input-placeholder {
opacity: 0;
}
小开

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


});


}
小开
< p >编辑: 所有浏览器现在都支持

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:

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+ */
小开

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

$("[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'));
});
});
};
小开

进一步细化华莱士Sidhree的代码示例:

$(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中的工作示例。

小开

我喜欢css的过渡方法。在Focus上，占位符淡出;)也适用于文本区域。

谢谢凯西·朱的好主意。

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;
}
小开

为了增强@casey-chu和pirate 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; }
小开

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

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


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

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

<强>注意:

.

.

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

小开

输入

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; }
小开 
$("input[placeholder]").focusin(function () {
$(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
$(this).attr('placeholder', $(this).data('place-holder-text'));
});
小开 
$("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");
});
});
小开

使用SCSS和http://bourbon.io/，这个解决方案简单、优雅，并且适用于所有web浏览器:

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

用波旁威士忌!这对你有好处!

小开

纯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 */
<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):添加了可运行的堆栈片段。
小开

有时你需要特异性来确保你的风格应用了最强因子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;
}

小开

除此之外，我有两个想法。

您可以添加一个模仿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，我的英语很差。希望能解决你的问题。

小开

试试这个函数:

+它隐藏占位符在焦点上，并返回它在模糊

+这个函数依赖于占位符选择器，首先它选择具有占位符属性的元素，触发一个聚焦函数，另一个模糊函数。

重点:它向元素添加了一个属性“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', '');
});
});

如果您通过检查输入元素来了解幕后发生的事情，您就可以很好地理解我的意思

小开 
/* 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; }
小开

和我在angular 5中应用的一样。

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

newPlaceholder:string;

然后我在输入框上使用了焦点和模糊函数(我使用的是素数ng自动完成)。

上面的占位符是从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;
}
小开

2018 > JQUERY .3.3解决方案: 工作全局所有输入，文本区域占位符。

 $(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);
};
});
});
小开

用纯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;
}
小开

不需要使用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;
}

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

小开

任何版本的Angular

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

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

在课堂上使用

<input class="hide_placeholder"

提交答案