Question

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

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

Answer 1

你可以使用这个插件 https://github.com/mathiasbynens/jquery-placeholder 甚至适用于IE6

Answer 2

你可以使用jquery水印插件

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

Answer 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');
                         }
                       }
                   });
        }
    });
}

Answer 4

从鲁本斯回答，这里有一个演示

http://mathiasbynens.be/demo/placeholder

Answer 5

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();

占位符不在IE8中显示Bootstrap

5 个答案: