jquery跨浏览器支持问题

Posted 2023-03-05

【中文标题】jquery跨浏览器支持问题

【英文标题】：jquery cross-browser supports issue

【发布时间】：2013-11-12 10:30:23

【问题描述】：

我知道jquery supports all including old browsers

但我尝试为搜索框添加占位符，但它在 IE8 中不起作用

jQuery(document).ready(function()
    $('#search').attr('placeholder','search....');                          
);

所以我想了解更多关于跨浏览器支持的信息。如前所述，它实际上是否有效？

---

我知道不支持 html 属性 placeholder。但我的问题是关于 jquery 的。

【问题讨论】：

IE8 ??用火杀死它 ！！ :p

你看过this吗？之前好像有人问过一个重复的问题……

您似乎在滥用占位符属性来代替 <label> 元素。 specification 禁止这样做。

我似乎认为jquery在html之外使用了自己的定义，但是有这个问题才知道jquery只是解析dom......

【参考方案1】：

占位符是 IE8 不支持的 HTML5 功能

使用下面的

<input type="text" value="search..." onfocus="if(this.value == 'search...') this.value = '';" onblur="if(this.value == '') this.value = 'search...';" />

使用 jquery

<input type="text" class="my-input" value=""  />

    <script type="text/javascript">

        $(document).ready(function () 
            $('.my-input').val('search...');
            $('.my-input').focus(function () 
                if (this.value == 'search...') this.value = '';
            );
            $('input.my-input').blur(function () 
                if (this.value == '') this.value = 'search...'
            );
        );
        /*
        here I assumed a class
        .my-input 

        you can use input#id or input.className or other selector

        better you give the code of your text-box or entire form so that I can give you the exact selector

        */
    </script>

【讨论】：

我怎样才能对 jquery 做同样的事情，因为我无法编辑标记

【参考方案2】：

不支持如上占位符。 因此，将以下代码/cmets 添加到 HTML 页面的头部。现在 ie8 会很好玩。

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

【讨论】：

什么是 HTML5 Shim 和 Respond.js ？请简要讨论 HTML5 Shim 和 Respond.js 以及何时需要这 2？谢谢

【参考方案3】：

IE8 不支持占位符

只有IE10+支持这个属性

但如果你真的想要占位符，看看这个 jQuery 插件https://github.com/mathiasbynens/jquery-placeholder

【参考方案4】：

这里的问题不是 JQuery 而是占位符属性本身。请参阅this chart 以获取问题的答案：否，IE8 不支持placeholder attribute。