placeholder兼容IE8浏览器

最新推荐文章于 2019-04-17 18:09:55 发布

原创最新推荐文章于 2019-04-17 18:09:55 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

Troubles-Shooting 专栏收录该内容

16 篇文章

订阅专栏

本文介绍两种使用JavaScript实现HTML输入框占位符(placeholder)效果的方法：一是直接利用JS的focus与blur事件；二是通过引入jQuery插件来增强功能。这两种方案适用于不支持原生placeholder属性的老版浏览器。

第一种方法

思路是用js的focus和blur实现placeholder功能。
新建一个js文件

(function() {
    if(!('placeholder' in document.createElement('input'))) {

        $('input[placeholder],textarea[placeholder]').each(function() {
            var that = $(this),
                text = that.attr('placeholder');
            if(that.val() === "") {
                that.val(text).addClass('placeholder');
            }
            that.focus(function() {
                    if(that.val() === text) {
                        that.val("").removeClass('placeholder');
                    }
                })
                .blur(function() {
                    if(that.val() === "") {
                        that.val(text).addClass('placeholder');
                    }
                });
        });
    }
})();