占位符在IE9中
这似乎是一个非常知名的问题，但我在Google上find的所有解决scheme都不适用于我新下载的IE9。
为了在input和textarea标签上启用Placeholder属性，你最喜欢哪种方式？
可选：我在这方面花了很多时间，并没有findrequired财产。 你也会有一些build议吗？ 很明显我可以在PHP中查看这个值，但是为了帮助用户这个属性非常方便。
HTML5占位符jQuery插件
– Mathias Bynens （ HTML5 Boilerplate和jsPerf的合作者 ）
https://github.com/mathiasbynens/jquery-placeholder
演示和示例
http://mathiasbynens.be/demo/placeholder
PS
我多次使用这个插件，它的工作原理。 当你提交你的表单时，它也不会提交占位符文本（…我发现与其他插件真正的痛苦）。
我认为这是你正在寻找的： jquery-html5-placeholder-fix
此解决scheme使用function检测（通过modernizr ）来确定是否支持占位符。 如果不是，则添加支持（通过jQuery）。
如果你不想使用jquery或者modenizer，你可以使用下面的代码：
(function(){ "use strict"; //shim for String's trim function.. function trim(string){ return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, ""); } //returns whether the given element has the given class name.. function hasClassName(element, className){ //refactoring of Prototype's function.. var elClassName = element.className; if(!elClassName) return false; var regex = new RegExp("(^|\\s)" + className + "(\\s|$)"); return regex.test(element.className); } function removeClassName(element, className){ //refactoring of Prototype's function.. var elClassName = element.className; if(!elClassName) return; element.className = elClassName.replace( new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '); } function addClassName(element, className){ var elClassName = element.className; if(elClassName) element.className += " " + className; else element.className = className; } //strings to make event attachment x-browser.. var addEvent = document.addEventListener ? 'addEventListener' : 'attachEvent'; var eventPrefix = document.addEventListener ? '' : 'on'; //the class which is added when the placeholder is being used.. var placeHolderClassName = 'usingPlaceHolder'; //allows the given textField to use it's placeholder attribute //as if it's functionality is supported natively.. window.placeHolder = function(textField){ //don't do anything if you get it for free.. if('placeholder' in document.createElement('input')) return; //don't do anything if the place holder attribute is not //defined or is blank.. var placeHolder = textField.getAttribute('placeholder'); if(!placeHolder) return; //if it's just the empty string do nothing.. placeHolder = trim(placeHolder); if(placeHolder === '') return; //called on blur - sets the value to the place holder if it's empty.. var onBlur = function(){ if(textField.value !== '') //a space is a valid input.. return; textField.value = placeHolder; addClassName(textField, placeHolderClassName); }; //the blur event.. textField[addEvent](eventPrefix + 'blur', onBlur, false); //the focus event - removes the place holder if required.. textField[addEvent](eventPrefix + 'focus', function(){ if(hasClassName(textField, placeHolderClassName)){ removeClassName(textField, placeHolderClassName); textField.value = ""; } }, false); //the submit event on the form to which it's associated - if the //placeholder is attached set the value to be empty.. var form = textField.form; if(form){ form[addEvent](eventPrefix + 'submit', function(){ if(hasClassName(textField, placeHolderClassName)) textField.value = ''; }, false); } onBlur(); //call the onBlur to set it initially.. }; }());
对于每个文本字段你想要使用它需要运行placeHolder(HTMLInputElement) ，但我想你可以改变，以适应！ 而且，这样做，而不仅仅是加载意味着您可以使其在页面加载时不在DOM中的input工作。
请注意，这是通过将类usingPlaceHolder应用于input元素来实现的，因此您可以使用它来设置它的样式（例如，添加规则.usingPlaceHolder { color: #999; font-style: italic; }使其看起来更好） 。
这是一个更好的解决scheme。 http://bavotasan.com/2011/html5-placeholder-jquery-fix/我已经采用了一点点IE10下的浏览器;
<!DOCTYPE html> <!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]><html class="no-js lt-ie10 lt-ie9" lang="en"> <![endif]--> <!--[if IE 9]><html class="no-js lt-ie10" lang="en"> <![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]--> <script> // Placeholder fix for IE $('.lt-ie10 [placeholder]').focus(function() { var i = $(this); if(i.val() == i.attr('placeholder')) { i.val('').removeClass('placeholder'); if(i.hasClass('password')) { i.removeClass('password'); this.type='password'; } } }).blur(function() { var i = $(this); if(i.val() == '' || i.val() == i.attr('placeholder')) { if(this.type=='password') { i.addClass('password'); this.type='text'; } i.addClass('placeholder').val(i.attr('placeholder')); } }).blur().parents('form').submit(function() { //if($(this).validationEngine('validate')) { // If using validationEngine $(this).find('[placeholder]').each(function() { var i = $(this); if(i.val() == i.attr('placeholder')) i.val(''); i.removeClass('placeholder'); }) //} }); </script> ... </html>
如果你想input一个描述，你可以使用这个。 这适用于IE 9和所有其他浏览器。
<input type="text" onclick="if(this.value=='CVC2: '){this.value='';}" onblur="if(this.value==''){this.value='CVC2: ';}" value="CVC2: "/>
使其在IE-9下工作，它为我工作
JQuery需要包含：
jQuery(function() { jQuery.support.placeholder = false; webkit_type = document.createElement('input'); if('placeholder' in webkit_type) jQuery.support.placeholder = true;}); $(function() { if(!$.support.placeholder) { var active = document.activeElement; $(':text, textarea, :password').focus(function () { if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) { $(this).val('').removeClass('hasPlaceholder'); } }).blur(function () { if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); } }); $(':text, textarea, :password').blur(); $(active).focus(); $('form').submit(function () { $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); }); } });
CSS样式需要包括：
.hasPlaceholder {color: #aaa;}
使用mordernizr来检测不支持占位符的浏览器，我创build了这个短代码来修复它们。
//If placeholder is not supported if (!Modernizr.input.placeholder){ //Loops on inputs and place the placeholder attribute //in the textbox. $("input[type=text]").each( function() { $(this).val($(this).attr('placeholder')); }) }
我知道我迟到了，但是我发现了一个解决scheme：
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--FIX jQuery INTERNET EXPLORER-->
我通常认为http://cdnjs.com/的评价很高，他们列出了：;
ajax/libs/placeholder-shiv/0.2/placeholder-shiv.js
不知道谁是代码，但看起来很简单：
document.observe('dom:loaded', function(){ var _test = document.createElement('input'); if( ! ('placeholder' in _test) ){ //we are in the presence of a less-capable browser $$('*[placeholder]').each(function(elm){ if($F(elm) == ''){ var originalColor = elm.getStyle('color'); var hint = elm.readAttribute('placeholder'); elm.setStyle('color:gray').setValue(hint); elm.observe('focus',function(evt){ if($F(this) == hint){ this.clear().setStyle({color: originalColor}); } }); elm.observe('blur', function(evt){ if($F(this) == ''){ this.setValue(hint).setStyle('color:gray'); } }); } }).first().up('form').observe('submit', function(evt){ evt.stop(); this.select('*[placeholder]').each(function(elm){ if($F(elm) == elm.readAttribute('placeholder')) elm.clear(); }); this.submit(); }); } });
我在互联网上search，并find一个简单的jQuery代码来处理这个问题。 在我的身边，它已经解决了，即9年。
$("input[placeholder]").each(function () { var $this = $(this); if($this.val() == ""){ $this.val($this.attr("placeholder")).focus(function(){ if($this.val() == $this.attr("placeholder")) { $this.val(""); } }).blur(function(){ if($this.val() == "") { $this.val($this.attr("placeholder")); } }); } });
晚了一点晚了，但我用我的尝试和值得信赖的JS利用Modernizr 。 可以复制/粘贴并应用于任何项目。 每次工作：
// Placeholder fallback if(!Modernizr.input.placeholder){ $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); }
