placeholder兼容

最新推荐文章于 2021-06-27 23:01:47 发布

转载最新推荐文章于 2021-06-27 23:01:47 发布 · 450 阅读

文章标签：

#浏览器

兼容性专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS来为不同浏览器（包括IE10及以下版本）设置输入框占位符颜色的方法。通过检测浏览器是否支持占位符属性，该方法能够为不支持此特性的浏览器提供回退方案。

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

不同浏览器及ie10

input::-webkit-input-placeholder {color: #ccc;}
input::-moz-input-placeholder {color: #ccc;}
input:-ms-input-placeholder {color: #ccc;}

ie10以下

 /*placeholder*/
    if (!('placeholder' in document.createElement('input'))) {  
        $('[placeholder]').each(function () {  
            var $tag = $(this); //当前 input  
            var $copy = $tag.clone();   //当前 input 的复制  
            if ($copy.val() == "") {  
                $copy.css("color", "#ccc");  
                $copy.val($copy.attr('placeholder'));  
            }  
            $copy.focus(function () {  
                if (this.value == $copy.attr('placeholder')) {  
                    this.value = '';  
                    this.style.color = '#666';  
                }  
            });  
            $copy.blur(function () {  
                if (this.value=="") {  
                    this.value = $copy.attr('placeholder');  
                    $tag.val("");  
                    this.style.color = '#ccc';  
                } else {  
                    $tag.val(this.value);  
                }  
            });  
            $tag.hide().after($copy.show());    //当前 input 隐藏 ，具有 placeholder 功能js的input显示  
        });  
    }