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

【问题标题】：How to support placeholder attribute in IE8 and 9如何在 IE8 和 9 中支持占位符属性
【发布时间】：2013-02-07 20:57:00
【问题描述】：

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

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

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

【问题讨论】：

学究的角落：它是一个属性，而不是一个标签。标签周围有尖括号（如<input>）；属性是尖括号内的键值对（如placeholder="This is an attribute value"）。保留原样，以便将来提出相同问题的人可以找到它。
该链接没有按原样工作。我删除了 $("[placeholder]") 选择器周围的多余引号，这很好。
该链接中的解决方案也不根据 webkit 中的本机支持处理密码框
您提供的链接确实很好用 - 除了密码之外，它还很实用，而且设置起来再简单不过了
链接是一个很好的修复

标签： html internet-explorer placeholder

【解决方案1】：

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

但是您的链接似乎也是一个很好的解决方案。

【讨论】：

问题中建议的链接对我不起作用；表单提交有问题。您在此答案中建议的解决方案似乎更加强大并且很有效。
实际上我尝试了这个并且工作正常 - 但是一旦我加载一个带有表单和密码字段的灯箱，一切正常，但不是密码字段 - 它只是空的。跨度>
在我的 IE8 密码占位符中是点
在ie8中也看不到。在 ie8 中，我通过在字段上方显示一些文本来解决它。
jQuery-placeholder 的行为不同。它会删除焦点上的占位符，而不是当用户开始在字段上键入内容时，就像 Firefox 中占位符的正常行为一样。

【解决方案2】：

您可以使用以下任何一种 polyfill：

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

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

【讨论】：

我对此表示赞同，因为我喜欢非 jquery 解决方案的想法，但现在这段代码在 IE8 中存在问题，因此不适合我。 github.com/jamesallardice/Placeholders.js/issues/17
此解决方案不处理密码框
@Jurik 我添加了一个额外的 polyfill - 希望对您有所帮助。
连这个插件的经销商都说这个插件不处理 github.com/jamesallardice/Placeholders.js/issues/… 中的密码字段
密码字段在 iE8 中仍然不起作用。接受的答案链接似乎在 ie8 中适用于密码字段。

【解决方案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>

【讨论】：

这就像一个魅力，我更喜欢它而不是添加插件，非常感谢
@vsync 不，如果你读得好，我说的是插件，复数，大多数选项我发现你需要使用多个文件，包含大量代码，而不是几行代码。你是不是有点自大，那条评论如何改善答案
这真的不应该被使用。这是供 jQuery 内部使用的，可以随时删除。 api.jquery.com/category/deprecated/deprecated-1.9

【解决方案4】：

如果你使用 jquery，你可以这样做。来自本站Placeholder with Jquery

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

这些是备用链接

Placeholder jquery library
HTML5 polyfills -- 转到占位符部分

【讨论】：

此答案有效，但您需要点击链接才能获得完整的功能。单独这里的代码是行不通的。
ofc 不行，这是个嘲讽代码！为什么你一次又一次地为submit 事件绑定相同的“表单”？提交事件与什么有什么关系
如果我在 IE8 中键入与占位符文本相同的文本会发生什么？

【解决方案5】：

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

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"));
        }
    });
}

【讨论】：

是否支持IE9？

【解决方案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("");
                }
            })
        });
    }
});

试试这个

【讨论】：

【解决方案7】：

我用这个，它只是 Javascript。

我只是有一个带值的输入元素，当用户单击输入元素时，它会将其更改为没有值的输入元素。

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

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

修补匠：http://tinker.io/4f7c5/1 - JSfiddle 服务器已关闭！

*抱歉我的英语不好

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>

【讨论】：

如果字段为空且焦点丢失，占位符应返回

【解决方案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 文件中。感谢http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

【讨论】：

【解决方案9】：

由于大多数解决方案都使用 jQuery，或者并不像我希望的那样令人满意，我为自己编写了一个用于 mootools 的 sn-p。

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 以及任何额外添加的代码，例如弹出窗口。

希望你喜欢。

亲切的问候。

【讨论】：

【解决方案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...
}

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案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下载完整代码和演示

【讨论】：

【解决方案13】：

这是一个 javascript 函数，它将为 IE 8 及以下版本创建占位符，它也适用于密码：

/* 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>

【讨论】：

【解决方案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>

【讨论】：

$.browser.msie 不再受支持。尝试改用特征检测。