placeholer属性IE6-IE9兼容问题

解决方法来自网上搜索: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));
            }
        });
    }
});

猜你喜欢

转载自att-vsp.iteye.com/blog/2293042