实现ie浏览器对placeholder的兼容

最新推荐文章于 2019-12-05 13:58:00 发布

无名大强

最新推荐文章于 2019-12-05 13:58:00 发布

阅读量563

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：手机-轮播图-源码 js

本文链接：https://blog.youkuaiyun.com/wumingxiaoqiang/article/details/50739735

js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种针对老版本IE浏览器不支持placeholder属性的兼容性解决方案。通过使用JavaScript和span标签来模拟placeholder效果，确保在不支持此特性的浏览器中也能正常显示提示文本。

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

/**
 * 函数：实现ie浏览器对placeholder的兼容
 * 输入：
 * 输出：
**/
function compatiblePlaceholder(){
    var isPlaceholder = 'placeholder' in document.createElement('input');
    if (!isPlaceholder) {
        $("input[placeholder]").each(function() {
            var text = $(this).attr("placeholder");
            var $span = $('<span class="place_holder">'+ text +'</span>');
            $(this).before($span);
            var $that = $(this);
            $span.on("click focus",function() {
                $that.click();
            });
            $(this).click(function() {
                $(this).focus();
                $span.hide();
            });
            $(this).blur(function(){
                $span.show();
            });
        });
        $(".two_ph").each(function() {
            $(this).find(".place_holder").eq(1).addClass("for_ben_rate");
        });
    }
}

老版本ie浏览器不支持placeholder功能，为了实现该功能，有多个思路，以上是本人提供的一个思路，利用一个span标签来模拟placeholder。