placeholder兼容IE8浏览器

杨不败

于 2018-01-24 13:58:46 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏： Troubles-Shooting 文章标签： js

本文链接：https://blog.youkuaiyun.com/AndyNikolas/article/details/79150030

Troubles-Shooting 专栏收录该内容

16 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法

思路是用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');
                    }
                });
        });
    }
})();