IE兼容实现HTML5的placeholder

最新推荐文章于 2022-11-02 15:23:32 发布

转载最新推荐文章于 2022-11-02 15:23:32 发布 · 230 阅读

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了三种在不支持placeholder属性的老浏览器上实现占位符功能的方法：使用JQ自定义实现、借助JQ插件及利用原生JS结合Label标签。每种方案均有其适用场景和局限。

一、JQ方式实现（不支持password类型）



<script type="text/javascript">   
  if( !('placeholder' in document.createElement('input')) ){   
    $('input[placeholder],textarea[placeholder]').each(function(){    
      var that = $(this),    
      text= that.attr('placeholder');    
      if(that.val()===""){    
        that.val(text).addClass('placeholder');    
      }    
      that.focus(function(){    
        if(that.val()===text){    
          that.val("").removeClass('placeholder');    
        }    
      })    
      .blur(function(){    
        if(that.val()===""){    
          that.val(text).addClass('placeholder');    
        }    
      })    
      .closest('form').submit(function(){    
        if(that.val() === text){    
          that.val('');    
        }    
      });    
    });    
  }   </script>
上面的方法缺点就是不能支持password类型的文本框，目前还没有很好的解决办法。

二、使用JQ插件jquery.placeholer.js

Github地址：https://github.com/tonitech/jquery.placeholder.js 引入到页面然后执行下面的代码：



<script type="text/javascript">$(function() {
 $('input, textarea').placeholder();});</script>
这个方法比较简单，唯一令我不喜欢的是它要求jquery版本1.3到1.8，而我现在在项目中使用的是1.11，所以无奈我没有使用，如果你的项目使用的是1.3-1.8版本的，可以尝试下。

三、原生JS通过Label标签实现



<script type="text/javascript">var funPlaceholder = function(element) {  
    //检测是否需要模拟placeholder  
    var placeholder = '';  
    if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {  
        //当前文本控件是否有id, 没有则创建  
        var idLabel = element.id ;  
        if (!idLabel) {  
            idLabel = "placeholder_" + new Date().getTime();  
            element.id = idLabel;  
        }  
        //创建label元素  
        var eleLabel = document.createElement("label");  
        eleLabel.htmlFor = idLabel;  
        eleLabel.style.position = "absolute";  
        //根据文本框实际尺寸修改这里的margin值  
        eleLabel.style.margin = "8px 0 0 3px";  
        eleLabel.style.color = "graytext";  
        eleLabel.style.cursor = "text";  
        //插入创建的label元素节点  
        element.parentNode.insertBefore(eleLabel, element);  
        //事件  
        element.onfocus = function() {  
            eleLabel.innerHTML = "";  
        };  
        element.onblur = function() {  
            if (this.value === "") {  
                eleLabel.innerHTML = placeholder;  
            }  
        };  
        //样式初始化  
        if (element.value === "") {  
            eleLabel.innerHTML = placeholder;  
        }  
    }  };  funPlaceholder(document.getElementsByName("username")[0]);  funPlaceholder(document.getElementsByName("password")[0]);  </script>