ie9+及其他兼容placeholder

最新推荐文章于 2025-08-16 15:21:12 发布

转载最新推荐文章于 2025-08-16 15:21:12 发布 · 385 阅读

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种兼容IE8及以下版本浏览器的placeholder属性实现方法。通过使用jQuery，为不支持placeholder属性的浏览器提供回退方案，确保所有用户都能看到输入框提示信息。

placeholder属性树HTML5提出的新属性，作用是为input框或textarea框添加初始提示内容。当控件获取焦点输入时，清空提示内容。但IE8及其以下的版本并不支持该属性的显示。

下面做如下处理：

    $(function(){  
         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('');      
                    }      
                  });      
                });    
         }  
    });

第一个if条件是判断placeholder是否存在于解析的input框中。

closest方法的作用是:从当前元素开始向上查找，直到找到匹配的元素为止。

上诉closest方式计算查找form元素，然后在执行提交的form表单的时候执行sumit的方法。

上面添加了一个palceholder样式，其样式内容为：

[css] view plain copy print ?

    .placeholder{  
        opacity:0.5;  
        filter:alpha(opacity=50);  
    }

opcaity属性是用来定义透明度的，其值在0-1.0之间。但IE8及其以下的版本并不支持。

在IE8上需用filter:alpha(opacity=?)来过滤，opacity的值在0-100间。