jquery解决IE10以下placeholder的兼容问题

最新推荐文章于 2023-09-13 23:00:00 发布

夏雨影韵

最新推荐文章于 2023-09-13 23:00:00 发布

阅读量687

点赞数

分类专栏：兼容问题文章标签： placeholder

本文链接：https://blog.csdn.net/qq_34673734/article/details/81606851

版权

兼容问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
        .item-label{
            height: 30px;
            line-height:30px ;
            float: left;
        }
        input {
            height: 30px;
            line-height: 30px;
            background-color: transparent;
            text-align: right;
            width: 170px;
            padding: 0;
            font-size: 14px;
        }
        input::-webkit-input-placeholder {
            color: #999;
        ;
        }

        input::-moz-input-placeholder {
            color: #999;
        ;
        }

        input::-ms-input-placeholder {
            color: #999;
        ;
        }

        input::-o-input-placeholder {
            color: #999;
        ;
        }
    </style>
</head>
<body>
<label class="item-label">
    姓名：</label>
<div class="item-cont item-text">
    <input name="name" id="name" type="text" placeholder="请输入您的姓名">
</div>
<label class="item-label">
    手机：</label>
<div class="item-cont item-text">

    <input name="mobile" id="mobile" type="tel" placeholder="请输入您的电话" maxlength="11" >
</div>
</body>
</html>
<script>
    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="position:absolute;height: 30px;text-align: right;width:170px;line-height: 30px;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 () {
            // console.log("11")
            $(this).hide();
            $(this).siblings("[placeholder]").trigger("click");
            $(this).siblings("[placeholder]").trigger("focus");
        });
    }
</script>

夏雨影韵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery解决IE10以下placeholder的兼容问题

话不多说直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript&qu
复制链接

扫一扫