解决html5新标签 placeholder 低版本浏览器下不兼容问题

2023-05-29,

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。


实例:
1
<input type="text" name="userName" placeholder="请输入用户名">


placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性。

然而,在IE9以下版本浏览器就失效了,并且IE10+支持placeholder属性,它的表现与其它浏览器也不一致

  • IE10+里鼠标点击时(获取焦点)placeholder文本消失

  • Firefox/Chrome/Safari点击不消失,而是键盘输入时文本消失

那么作为一名开发人员,是否应该去克服解决这个问题呢。目前网上也一堆类似解决方案,大致实现思路分为两种:

  1. (方式一)使用input的value作为显示文本,模拟灰色样式,focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue);

  2. (方式二)不使用value,添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面。

在这里因第一种方式实现起来,占用了value且验证时需要做额外的判断,那么个人建议使用第二种方式。


首先,判断当前浏览器是否支持placeholder属性:

1 function placeholderSupport() {2     return 'placeholder' in document.createElement('input');3 }

上关键代码:

/**placeholder兼容ie9以下 author:高丰鸣 add 2016-1-27*/$(function(){if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder
   $(document).ready(function(){         //默认遍历循环添加placeholder
       $('[placeholder]').each(function(){
           $(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>");
       })
       $('[placeholder]').blur(function(){            if($(this).val()!=""){  //如果当前值不为空,隐藏placeholder
               $(this).parent().find('span.placeholder').hide();
           }            else{
               $(this).parent().find('span.placeholder').show();
           }
       })
   });
   }
});        

《解决html5新标签 placeholder 低版本浏览器下不兼容问题.doc》

下载本文的Word格式文档,以方便收藏与打印。