如何在IE8和9中支持占位符属性

我有一个小问题，IE 8-9不支持input框的placeholder属性。

什么是在我的项目（ASPnetworking）中提供这种支持的最佳方式。 我正在使用jQuery。 我需要使用一些其他的外部工具吗？

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html是一个很好的解决scheme吗？

Answer 1

你可以使用这个jQuery插件： https ： //github.com/mathiasbynens/jquery-placeholder

但是，你的链接似乎也是一个很好的解决scheme。

Answer 2

您可以使用这些填充中的任何一个：

• https://github.com/jamesallardice/Placeholders.js （不支持密码字段）
• https://github.com/chemerisuk/better-placeholder-polyfill

这些脚本将在不支持它的浏览器中添加对placeholder属性的支持，而且它们不需要jQuery！

Answer 3

$ .Browser.msie不再是最新的JQuery …你必须使用$ .support

如下所示：

  <script> (function ($) { $.support.placeholder = ('placeholder' in document.createElement('input')); })(jQuery); //fix for IE7 and IE8 $(function () { if (!$.support.placeholder) { $("[placeholder]").focus(function () { if ($(this).val() == $(this).attr("placeholder")) $(this).val(""); }).blur(function () { if ($(this).val() == "") $(this).val($(this).attr("placeholder")); }).blur(); $("[placeholder]").parents("form").submit(function () { $(this).find('[placeholder]').each(function() { if ($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }); }); } }); </script> 

Answer 4

如果你使用jQuery，你可以这样做。 从这个网站占位符与Jquery

 $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); 

这些是替代的联系

1. 占位符jQuery库
2. HTML5的polyfills – 去占位符部分

Answer 5

我曾尝试过几个插件的兼容性问题，这在我看来是支持文本input的占位符的最简单的方法：

 function placeholders(){ //On Focus $(":text").focus(function(){ //Check to see if the user has modified the input, if not then remove the placeholder text if($(this).val() == $(this).attr("placeholder")){ $(this).val(""); } }); //On Blur $(":text").blur(function(){ //Check to see if the use has modified the input, if not then populate the placeholder back into the input if( $(this).val() == ""){ $(this).val($(this).attr("placeholder")); } }); } 

Answer 6

 $(function(){ if($.browser.msie && $.browser.version <= 9){ $("[placeholder]").focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }).blur(function(){ if($(this).val()=="") $(this).val($(this).attr("placeholder")); }).blur(); $("[placeholder]").parents("form").submit(function() { $(this).find('[placeholder]').each(function() { if ($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }) }); } }); 

尝试这个

Answer 7

我用这个，它只有Javascript。

我只需要一个带有值的input元素，当用户点击input元素时，它会将其更改为一个没有值的input元素。

您可以使用CSS轻松更改文字的颜色。 占位符的颜色是id #IEinput中的颜色，您input的文本的颜色将是id #email中的颜色。 不要使用getElementsByClassName，因为IE不支持占位符的版本不支持getElementsByClassName！

您可以通过将input的原始密码的types设置为文本来在input密码中使用占位符。

修补程序： http ://tinker.io/4f7c5/1 – JSFiddle服务器已closures！

*对不起，我的英语不好

JAVASCRIPT

 function removeValue() { document.getElementById('mailcontainer') .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">"; document.getElementById('email').focus(); } 

HTML

 <span id="mailcontainer"> <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail"> </span> 

Answer 8

对于其他人登陆这里。 这对我来说是有效的：

 //jquery polyfill for showing place holders in IE9 $('[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(''); } }) }); 

只要在你的script.js文件中join这个。 致谢http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 9

由于大多数解决scheme都使用jQuery，或者不是我所期望的那样令人满意，所以我为自己写了一个关于mootools的片段。

 function fix_placeholder(container){ if(container == null) container = document.body; if(!('placeholder' in document.createElement('input'))){ var inputs = container.getElements('input'); Array.each(inputs, function(input){ var type = input.get('type'); if(type == 'text' || type == 'password'){ var placeholder = input.get('placeholder'); input.set('value', placeholder); input.addClass('__placeholder'); if(!input.hasEvent('focus', placeholder_focus)){ input.addEvent('focus', placeholder_focus); } if(!input.hasEvent('blur', placeholder_blur)){ input.addEvent('blur', placeholder_blur); } } }); } } function placeholder_focus(){ var input = $(this); if(input.get('class').contains('__placeholder') || input.get('value') == ''){ input.removeClass('__placeholder'); input.set('value', ''); } } function placeholder_blur(){ var input = $(this); if(input.get('value') == ''){ input.addClass('__placeholder'); input.set('value', input.get('placeholder')); } } 

我承认，它看起来比别人多一点，但它工作正常。 __placeholder是一个ccs类，使占位符文本花哨的颜色。

我在window.addEvent（'domready'，…中使用了fix_placeholder ，以及任何额外添加的代码，如popup窗口。

希望你喜欢。

亲切的问候。

Answer 10

我用这个链接的代码http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

但是在浏览器检测中我使用了：

 if (navigator.userAgent.indexOf('MSIE') > -1) { //Your placeholder support code here... } 

Answer 11

 <input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" /> 

Answer 12

添加下面的代码，它将被完成。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script> <script type="text/javascript"> // Mock client code for testing purpose $(function(){ // Client should be able to add another change event to the textfield $("input[name='input1']").blur(function(){ alert("Custom event triggered."); }); // Client should be able to set the field's styles, without affecting place holder $("textarea[name='input4']").css("color", "red"); // Initialize placeholder $.Placeholder.init(); // or try initialize with parameter //$.Placeholder.init({ color : 'rgb(255, 255, 0)' }); // call this before form submit if you are submitting by JS //$.Placeholder.cleanBeforeSubmit(); }); </script> 

从https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip下载完整的代码和演示;

Answer 13

这里是一个JavaScript函数，它将为IE 8及更低版本创build占位符，它也适用于密码：

 /* Function to add placeholders to form elements on IE 8 and below */ function add_placeholders(fm) { for (var e = 0; e < document.fm.elements.length; e++) { if (fm.elements[e].placeholder != undefined && document.createElement("input").placeholder == undefined) { // IE 8 and below fm.elements[e].style.background = "transparent"; var el = document.createElement("span"); el.innerHTML = fm.elements[e].placeholder; el.style.position = "absolute"; el.style.padding = "2px;"; el.style.zIndex = "-1"; el.style.color = "#999999"; fm.elements[e].parentNode.insertBefore(el, fm.elements[e]); fm.elements[e].onfocus = function() { this.style.background = "yellow"; } fm.elements[e].onblur = function() { if (this.value == "") this.style.background = "transparent"; else this.style.background = "white"; } } } } add_placeholders(document.getElementById('fm')) 

 <form id="fm"> <input type="text" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <textarea name="description" placeholder="Description"></textarea> </form> 

Answer 14

  <script> if ($.browser.msie) { $('input[placeholder]').each(function() { var input = $(this); $(input).val(input.attr('placeholder')); $(input).focus(function() { if (input.val() == input.attr('placeholder')) { input.val(''); } }); $(input).blur(function() { if (input.val() == '' || input.val() == input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } ; </script> 

Answer 15

简单的修复！

有一个与CSS的修复，只要将该代码放入您的样式文件，所有占位符将正常工作：

 input.your-input-class: -ms-input-placeholder { color: #000000; //Your font color }