这是自动完成的每个浏览器，除了Chrome。
我猜我必须专门针对Chrome。
有解决方案吗?
如果不是用CSS，那么用jQuery?
当前回答
不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。
例如，在下面的邮箱中，点击里面的占位符文字会消失，点击外面的文字会重新出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
其他回答
输入
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');
});
编辑: 现在所有浏览器都支持
输入:重点::占位符{ 颜色:透明; } <input type="text" placeholder="在这里输入内容!">
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+ */
不需要使用CSS或JQuery。您可以直接从HTML输入标记执行此操作。
例如，在下面的邮箱中，点击里面的占位符文字会消失，点击外面的文字会重新出现。
<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">
你试过占位符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/
