我有以下占位符:
<div class="input-text-container search" style="display:none;">
<input type="text" id="textSearch" class="input-text-big search-message" placeholder="Search in your list"/>
<i class="common-sprite cross search"></i>
</div>
当用户点击带有&#34; search.icon-search&#34;
类的图标时,会显示输入我使用以下JS代码:
$('.search.icon-search').on(
'click',
function(e) {
e.preventDefault();
$('#textSearch').focus()
});
问题是占位符在焦点上消失了。如何在焦点上显示它?
答案 0 :(得分:4)
您不需要任何JavaScript或jQuery。我有一个纯CSS 解决方案。您可以在focus
上使用不透明度。
input {opacity: 0; outline: 0; border: 0;}
input:focus {opacity: 1; outline: 0; border: 0;}
span {border: 1px solid #999; display: inline-block;}
&#13;
<span><input placeholder="This is not visible until you click!" /></span>
&#13;
答案 1 :(得分:1)
您需要显示.input-text-container
,但您的代码可以正常运行。
试试这个:
$('.search.icon-search').on('click',function(e) {
e.preventDefault();
$(".input-text-container").show();
$('#textSearch').focus()
});
答案 2 :(得分:-1)
input::placeholder{
opacity: 0;
}
input:focus::placeholder{
opacity: 1;
}