会计师 發表於 2019-8-16 22:24:00

html5 placeholder兼容ie11

<p>placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint)。</p>
<p>简单例子:</p>
<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;body&gt;

&lt;form action="/test.do" method="get"&gt;
&lt;input type="search" name="user_search" placeholder="请在此输入你的审批意见" /&gt;
&lt;input type="submit" /&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;

</code></pre>
<p><img src="https://img-blog.csdnimg.cn/20190816221145526.png" alt="在这里插入图片描述" loading="lazy"></p>
<p>这个标签属性主要用于提示,未填写之前是会显示的,鼠标触发的时候,是会隐藏的</p>
<p><img src="https://img-blog.csdnimg.cn/20190816221422402.png" alt="在这里插入图片描述" loading="lazy"></p>
<p>注意:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 和password</p>
<p>好的,上面就是placeholder的简单用法简介,然后介绍一下placeholder的兼容性,placeholder在Chrome浏览器是正常的,不过在ie兼容性就很不好。</p>
<p>我是在ie11测试的,发现placeholder,鼠标点击时候是不会隐藏的,还是显示文字。</p>
<pre><code>&lt;textarea name="handleInfo.apprIdea" id="msg" class="form-control"
                  placeholder="请在此输入您的审批意见" height="126px;" style="overflow-y: auto;" value="${handleInfo.apprIdea}"&gt;${handleInfo.apprIdea}&lt;/textarea&gt;
</code></pre>
<p>然后网上很多教程都是重写样式,用onchange等等函数替换,不过我觉得太麻烦,然后调试过程发现写在$(function(){…});初始化函数的时候,加个attr属性,竟然是可以兼容的,具体做法:</p>
<pre><code>$(function(){
$("#msg").attr("placeholder","请在此输入您的审批意见");
});

</code></pre>
<p>注意,这个方法只在ie11测试过,ie8等等没测试过,所以本博客不予记录</p>


</div>
<div id="MySignature" role="contentinfo">
    IT程序员<br><br>
来源:https://www.cnblogs.com/mzq123/p/11366678.html
頁: [1]
查看完整版本: html5 placeholder兼容ie11