这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
这是自动完成的每个浏览器,除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS,那么用jQuery?
当前回答
纯CSS解决方案(不需要JS)
基于@Hexodus和@Casey Chu的回答,这里是一个更新的跨浏览器解决方案,利用CSS不透明和过渡淡出占位符文本。它适用于任何可以使用占位符的元素,包括文本区域和输入标记。
::-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):添加了可运行的堆栈片段。
其他回答
输入
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; }
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');
});
使用SCSS和http://bourbon.io/,这个解决方案简单,优雅,并适用于所有的web浏览器:
input:focus {
@include placeholder() {
color: transparent;
}
}
用波旁威士忌!这对你有好处!
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
如果您的输入背景颜色是白色,那么您可以将占位符文本的颜色设置为焦点,以匹配输入背景-使文本不可见;从理论上讲。如果你的输入是不同的颜色,那么只需简单地改变颜色以匹配它。
input:focus::placeholder {
color: white;
}
此外,您可以将颜色设置为“透明”,如其他答案所示。