如何自动隐藏占位符文本焦点使用CSS或jQuery的？
除Chrome之外，每个浏览器都会自动完成此操作。
我猜我必须专门针对Chrome 。
任何解决scheme
如果不是用CSS ，那么用jQuery ？
<input type="text" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" /> Firefox 15和IE 10+现在也支持这个function。 要扩展Casey Chu的CSS 解决scheme ：
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的解决scheme（现在只适用于WebKit）：
input:focus::-webkit-input-placeholder { opacity: 0; }
你有没有试过占位符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')); }); });
testing： http : //jsfiddle.net/mPLFf/4/
-编辑-
实际上，因为占位符应该用来描述价值，而不是input的名字。 我build议下面的select
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; }
testing：
为了增加@ 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; }
托尼的答案是好的，但我宁愿放弃ID明确使用input ，这样所有的placeholderinput得到的行为：
<input type="text" placeholder="your text" />
请注意$(function(){ }); 是$(document).ready(function(){ });的简写forms$(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')); }); })
演示。
我喜欢将其打包在名称空间中，并使用“占位符”属性运行元素…
$("[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')); }); }); };
build立在@Hexodus和@Casey Chu的答案，这里是一个更新和跨浏览器的解决scheme，利用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 */
编辑：更新以支持现代浏览器。
为了进一步完善WallaceSidhré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')); }); })
这可确保每个input都将正确的占位符文本存储在数据属性中。
在jsFiddle看到一个可行的例子 。
我喜欢css方法join转换。 焦点占位符淡出;）也适用于textareas。
谢谢@Casey楚的伟大的想法。
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; }
使用SCSS和http://bourbon.io/ ，这个解决scheme简单，优雅，适用于所有网页浏览器：
input:focus { @include placeholder() { color: transparent; } }
使用波旁威士忌！ 这是对你有好处 ！
有时你需要特殊性，以确保您的风格是最强的因子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; }
这块CSS为我工作：
input:focus::-webkit-input-placeholder { color:transparent; }
对于纯CSS的解决scheme：
input:focus::-webkit-input-placeholder {color:transparent;} input:focus::-moz-placeholder {color:transparent;} input:-moz-placeholder {color:transparent;}
注意：尚未被所有浏览器供应商支持。
参考：通过Ilia Raiskin的CSS隐藏占位符文本 。
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'); });
演示在这里： 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')); }); }); }
input
input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; }
为textarea
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"); }); });
除了以上所有，我有两个想法。
您可以添加模仿palceholder的元素。然后使用javascript控制显示和隐藏的元素。
但它是如此复杂，另一个是使用css的兄弟select器。就像这样：
.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; } .send-message input:focus + .placeholder { display: none; }
试试这个function：
+它隐藏在焦点上的PlaceHolder并返回模糊
+这个函数依赖于占位符select器，首先它select带有占位符属性的元素，触发一个聚焦function，另一个模糊。
关注焦点：它向元素添加属性“data-text”，该元素从占位符属性获取其值，然后删除占位符属性的值。
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', ''); }); });
如果您通过检查input元素来查看幕后发生的情况，您可以很好地跟踪我
