placeholder属性在IE中失效的解决办法

2017-4-8 18:24 来自本站原创 20,097 4 9
[摘要]

placeholder是一个很实用的Html 5属性,但是该属性在低版本的IE下是无效的,本文给出placeholder属性在 IE中失效的解决办法。

在页面设计中,表单的设计需要提示性的词语来引导用户使用,最常见的的就是使用<input>标签placeholder属性,只可惜这个HTML 5属性在低版本的IE下会失效,那该怎么办呢?

先来了解下placeholder

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

如:

<form action="xxx.php" method="get">
 <input type="search" name="username" placeholder="用户名" />
</form>

用户在使用表单的时候就会看到“用户名”这样的提示,在用户点击输入框时提示文字消失,非常的实用。但是该效果在IE下会失效,如果是多个输入框的话,没有提示文字,对用户十分的不友好。

placeholder属性在IE中失效的解决办法

只需要使用以下js代码,就可以解决placeholder属性在IE中失效了。

<script type="text/javascript">
 ;(function($){
 $.fn.placeholder = function(options){
 var opts = $.extend({}, $.fn.placeholder.defaults, options);
 var isIE = document.all ? true : false;
 return this.each(function(){
 var _this = this,
 placeholderValue =_this.getAttribute("placeholder"); //缓存默认的placeholder值
 if(isIE){
 _this.setAttribute("value",placeholderValue);
 _this.onfocus = function(){
 $.trim(_this.value) == placeholderValue ? _this.value = "" : '';
 };
 _this.onblur = function(){
 $.trim(_this.value) == "" ? _this.value = placeholderValue : '';
 };
 }
 });
 };
 })(jQuery);
 </script>

然后设置需要支持此功能的元素。

<script type="text/javascript">
 $("input").placeholder();
 </script>

注意:此代码基于jquery库,所以使用前请先引入jquery库文件。

本文最后更新于2017年9月2日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:4   其中:访客  3   博主  1
    加载中...
    1. 1年前 (2017-04-10) 椅子

      不懂了。来看看。

    2. 1年前 (2017-04-09) 沙发

      不错,博主对HTML/CSS研究颇深呀!

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    4 9 20,097
    Top