Bootstrap 的 IE8 中不显示占位符

Posted

技术标签:

【中文标题】Bootstrap 的 IE8 中不显示占位符【英文标题】:Placeholders are not displaying in IE8 for Bootstrap 【发布时间】:2012-10-27 12:55:25 【问题描述】:

我正在为我的项目使用 Bootstrap。除 Internet Explorer 8 及更低版本外,所有浏览器的占位符都可以正常显示。

是否有任何解决方案可以在 IE8 中获得占位符支持?

【问题讨论】:

IE 不支持占位符,您必须使用一个值并使用 javascript 将其设置为焦点/模糊等。 您可以使用placeholder attribute polyfill 在所有浏览器中添加对placeholder 属性的支持。 IE 10 以下不支持。 如果他们对您有帮助,您应该接受其中一个答案 相关问题 - ***.com/questions/6366021/placeholder-in-ie9/14981525 【参考方案1】:

你可以使用jquery水印插件

https://code.google.com/p/jquery-watermark/

【讨论】:

【参考方案2】:

IE9 及以下不支持placeholder 属性。见this

您可以使用EZPZ hints 来补充它。如果浏览器是 IE 就加载脚本

 <!--[if lt IE 10]>
      <script src="PATHTOFILE"></script>
    <![endif]-->

EZPZ 提示允许您继续在现代浏览器中使用 placeholder

例子:

<input type="text" id="search" placeholder="Search" />

$("input[type=text]").ezpz_hint();

【讨论】:

【参考方案3】:

如果没有插件,这应该不难解决,我猜接近这个的东西可以解决问题:

var test = document.createElement('input');
if (!('placeholder' in test)) 
    $('input').each(function () 
        if ($(this).attr('placeholder') != "" && this.value == "") 
            $(this).val($(this).attr('placeholder'))
                   .css('color', 'grey')
                   .on(
                       focus: function () 
                         if (this.value == $(this).attr('placeholder')) 
                           $(this).val("").css('color', '#000');
                         
                       ,
                       blur: function () 
                         if (this.value == "") 
                           $(this).val($(this).attr('placeholder'))
                                  .css('color', 'grey');
                         
                       
                   );
        
    );

【讨论】:

IE 在if (!'placeholder' in test) 上崩溃 @pinouchon - 它不适合我,但如果这是一个问题,你所要做的就是将它包裹在括号中,这应该可以解决它。也将其添加到答案中。【参考方案4】:

你可以使用这个插件 https://github.com/mathiasbynens/jquery-placeholder 甚至可以在 IE6 中运行

【讨论】:

【参考方案5】:

加上鲁本斯的回答,这里有一个演示

http://mathiasbynens.be/demo/placeholder

【讨论】:

以上是关于Bootstrap 的 IE8 中不显示占位符的主要内容,如果未能解决你的问题,请参考以下文章

占位符在 IE8 和 IE9 中不起作用,即使使用 jQuery 插件

HTML 表单“占位符”在 IE 8 中不起作用

Bootstrap,选择选项占位符仅在首次提交后显示

占位符在 chrome 中不起作用

IE 和 Firefox 中不显示文本输入占位符

占位符在 select2 中不起作用