input、textarea标签placeholder兼容IE8浏览器js插件代码

IE8下placeholder兼容插件

最新推荐文章于 2020-06-12 13:51:18 发布

原创最新推荐文章于 2020-06-12 13:51:18 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

web前端同时被 2 个专栏收录

99 篇文章

订阅专栏

javascript

90 篇文章

订阅专栏

本文介绍了一个针对IE8浏览器不支持input和textarea标签placeholder属性的问题提供的JS插件解决方案。该插件能够确保在IE8环境下正确显示提示文本，并在用户开始输入时自动隐藏这些提示。

部署运行你感兴趣的模型镜像

这里写图片描述

input、textarea标签placeholder兼容IE8浏览器js插件代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>工作记事本</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</head>

<body>
    <div id="wordText">
        <input type="text" placeholder="请输入内容">
        <textarea placeholder="请输入内容"></textarea>
    </div>
    <div id="wordText">
        <input type="text" placeholder="请输入内容">
        <textarea placeholder="请输入内容"></textarea>
    </div>
    <div id="wordText">
        <input type="text" placeholder="请输入内容">
        <textarea placeholder="请输入内容"></textarea>
    </div>
    <div id="wordText">
        <input type="text" placeholder="请输入内容">
        <textarea placeholder="请输入内容"></textarea>
    </div>
</body>

<style>
    .placeholder{color:#ccc;}
</style>
<script>
    (function() {

        var suportPlaceholder = "placeholder" in document.createElement("input") || "placeholder" in document.createElement("textarea");

        function Placeholder(elem) {
            var text = elem.attr("placeholder");   //获取palceholder文本值
            var value = elem.val();

            if(!value){
                elem.val(text).addClass("placeholder");
            }

            elem.focus(function(){
                if(elem.val() == elem.attr("placeholder")){
                    elem.val("").removeClass("placeholder");
                }
            });

            elem.blur(function(){
                if(elem.val() == ""){
                    elem.val(text).addClass("placeholder");
                }
            });

        }
        $("input,textarea").each(function(){
            if(!suportPlaceholder){
                Placeholder($(this));
            }
        });
    }());
</script>

</html>