占位符在IE9中

这似乎是一个非常知名的问题,但我在Google上find的所有解决scheme都不适用于我新下载的IE9。

为了在inputtextarea标签上启用Placeholder属性,你最喜欢哪种方式?

可选:我在这方面花了很多时间,并没有findrequired财产。 你也会有一些build议吗? 很明显我可以在PHP中查看这个值,但是为了帮助用户这个属性非常方便。

11 Solutions collect form web for “占位符在IE9中”

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/的评价很高,他们列出了&#xFF1A;

//cdnjs.cloudflare.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(''); } }) }); } 
  • IE9边界半径和背景渐变出血
  • X-Frame-Options允许来自多个域
  • 如何在IE中禁用兼容性视图
  • JavaScript:如果IE7或IE8兼容模式,我可以检测IE9吗?
  • 在IE9 +中使用CSS3animation
  • 有没有办法来检测浏览器是否具有亚像素精度?
  • ie9边界半径
  • 在ie9中,img元素比例的SVG不受尊重
  • HTML5 - mp4video不能在IE9中播放
  • Internet Explorer 9中的渐变
  • 请问IE9 WebBrowser控件支持IE9的所有function,包括SVG吗?