placeholder兼容ie低版本方法

作者: bkbtp 分类: 前端 发布时间: 2018-03-30 15:15
// 判断浏览器是否支持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));
        }
    });
    $("textarea").each(function() {
        text = $(this).attr("placeholder");
        placeholder($(this));
    });
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。