简单实现IE9及以下对placeholder的兼容性

dingxiao9749

于 2018-06-28 14:11:00 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/Rookie-upgrade/p/9238408.html

版权

简单实现IE9及以下对placeholder的兼容性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单实现IE9及以下对placeholder的兼容性</title>
    <style>
        * {margin: 0;padding: 0;font-family: "Microsoft YaHei";font-size: 14px;}
        .input-box {margin: 10px;position: relative;width: 100px;height: 30px;line-height: 30px;}
        .input1 {width: 100%;height: 100%;padding-left: 5px;}
        .input2 {width: 100%;height: 100%;padding-left: 10px;}
        .placeholder {position: absolute;top: 0;z-index: 10;color: #888;}
    </style>
</head>
<body>
<div class="input-box">
    <input class="input1" type="text" placeholder="请输入标题">
</div>
<div class="input-box">
    <input class="input2" type="text" placeholder="请输入文章">
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
    // 兼容IE9下的placeholder
    function placeholderSupport() {
        return 'placeholder' in document.createElement('input');
    }
    if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
        $("[placeholder]").each(function(){
            var _this = $(this);
            var left = _this.css("padding-left");
            _this.parent().append('<span class="placeholder" data-type="placeholder" style="left: ' + left + '">' + _this.attr("placeholder") + '</span>');
            if(_this.val() != ""){
                _this.parent().find("span.placeholder").hide();
            }
            else{
                _this.parent().find("span.placeholder").show();
            }
        }).on("focus", function(){
            $(this).parent().find("span.placeholder").hide();
        }).on("blur", function(){
            var _this = $(this);
            if(_this.val() != ""){
                _this.parent().find("span.placeholder").hide();
            }
            else{
                _this.parent().find("span.placeholder").show();
            }
        });
        // 点击表示placeholder的标签相当于触发input
        $("span.placeholder").on("click", function(){
            $(this).hide();
            $(this).siblings("[placeholder]").trigger("click");
            $(this).siblings("[placeholder]").trigger("focus");
        });
    }
})
</script>
</body>
</html>