ie下不支持placeholder 用jquery来完成兼容

Posted 2020-08-01 鹿

这是我的第一个博客，还是写点正经的，希望对做前端朋友有所帮助。
最近在做的项目placeholder不兼容ie，这个可以兼容IE的输入框的html新增的placeholder的显示
下面是代码：
$( document ).ready( function()
{
   //ie下placeholder的兼容
   function isPlaceholder(){
      var input = document.createElement(‘input‘);
      return ‘placeholder‘ in input;
   }

   if (!isPlaceholder()) {//不支持placeholder 用jquery来完成
      $(document).ready(function() {
         if(!isPlaceholder()){
            $("input").not("input[type=‘password‘]").each(//把input绑定事件 排除password框
               function(){
                  if($(this).val()=="" && $(this).attr("placeholder")!=""){
                     $(this).val($(this).attr("placeholder"));
                     $(this ).css("color","gray");
                     $(this).focus(function(){
                        if($(this).val()==$(this).attr("placeholder")) $(this).val("");
                     });
                     $(this).blur(function(){
                        if($(this).val()=="") $(this).val($(this).attr("placeholder"));
                     });
                  }
               });
            //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
            var pwdField    = $("input[type=password]");
            var pwdVal      = pwdField.attr(‘placeholder‘);
            pwdField.after(‘<input id="pwdPlaceholder" type="text" value=‘+pwdVal+‘ autocomplete="off" />‘);
            var pwdPlaceholder = $(‘#pwdPlaceholder‘);
            pwdPlaceholder.show();
            pwdPlaceholder.css("border","none");//样式改变
            pwdPlaceholder.css("color","gray");
            pwdField.hide();

            pwdPlaceholder.focus(function(){
               pwdPlaceholder.hide();
               pwdField.show();
               pwdField.focus();
            });

            pwdField.blur(function(){
               if(pwdField.val() == ‘‘) {
                  pwdPlaceholder.show();
                  pwdField.hide();
               }
            });

         }
      });

   }
});