placeholer属性IE6-IE9兼容问题

最新推荐文章于 2022-03-20 19:00:08 发布

原创最新推荐文章于 2022-03-20 19:00:08 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种兼容所有浏览器的placeholder属性实现方法，包括IE低版本。通过JavaScript判断浏览器支持情况并提供相应解决方案。

解决方法来自网上搜索：http://www.jb51.net/article/56244.htm，写于此处方便个人引用。

placeholder属性用于输入框内的灰色提示字体，如“请输入用户名”。

此属性为html5中新属性，适用于IE10以后版本，FireFox,Chrome等,不适用于IE低版本，如想使用所有浏览器，方法入下：

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

.phcolor{ color:#999;}

$(function(){  
    // 判断浏览器是否支持placeholder属性
    supportPlaceholder='placeholder'in document.createElement('input'), 
    placeholder=function(input){ 
        var text = input.attr('placeholder'),
        defaultValue = input.defaultValue;
        if(!defaultValue){
            input.val(text).addClass("phcolor");
        }
        input.focus(function(){ 
            if(input.val() == text){
                $(this).val("");
            }
        });  
        input.blur(function(){ 
            if(input.val() == ""){       
                $(this).val(text).addClass("phcolor");
            }
        }); 
        // 输入的字符不为灰色
        input.keydown(function(){  
            $(this).removeClass("phcolor");
        });
    }; 
    //当浏览器不支持placeholder属性时，调用placeholder函数
    if(!supportPlaceholder){ 
        $('input').each(function(){
            text = $(this).attr("placeholder");
            if($(this).attr("type") == "text"){
                placeholder($(this));
            }
        });
    }
});