html5系列之placeholder兼容ie11

红太狼 2021-10-01 05:26 384阅读 0赞

placeholder 属性是html5的属性，用于提供描述输入字段预期值的提示信息（hint）。

简单例子：

<!DOCTYPE HTML>
    <html>
    <body>
    
    <form action="/test.do" method="get">
    <input type="search" name="user_search" placeholder="请在此输入你的审批意见" />
    <input type="submit" />
    </form>
    
    </body>
    </html>

![在这里插入图片描述][20190816221145526.png]

这个标签属性主要用于提示，未填写之前是会显示的，鼠标触发的时候，是会隐藏的

![在这里插入图片描述][20190816221422402.png]

注意：placeholder 属性适用于以下的 类型：text, search, url, telephone, email 和password

好的，上面就是placeholder的简单用法简介，然后介绍一下placeholder的兼容性，placeholder在Chrome浏览器是正常的，不过在ie兼容性就很不好。

我是在ie11测试的，发现placeholder，鼠标点击时候是不会隐藏的，还是显示文字。

<textarea name="handleInfo.apprIdea" id="msg" class="form-control"
                      placeholder="请在此输入您的审批意见" height="126px;" style="overflow-y: auto;" value="${handleInfo.apprIdea}">${handleInfo.apprIdea}</textarea>

然后网上很多教程都是重写样式，用onchange等等函数替换，不过我觉得太麻烦，然后调试过程发现写在$(function()\{…\});初始化函数的时候，加个attr属性，竟然是可以兼容的，具体做法：

$(function(){
    $("#msg").attr("placeholder","请在此输入您的审批意见");
    });

注意，这个方法只在ie11测试过，ie8等等没测试过，所以本博客不予记录

[20190816221145526.png]: /images/20210812/e137792560a2443d8c7aa02880ec2edb.png
[20190816221422402.png]: /images/20210812/757a442baa524b138dff60f4c4526511.png