在IE8及以下的浏览器中,不支持placeholder属性的解决办法

以下代码解决了在IE8及以下浏览器中不支持placeholder属性。

原理:将placeholder的值作为内容写入控件,并添加控件事件来进行模拟。

;(function(){
    if( !('placeholder' in document.createElement('input')) ){
        // 匹配 除type=password以外所有input、textarea
        $('input[placeholder][type!=password],textarea[placeholder]').each(function(){   
            var self = $(this),   
            text= self.attr('placeholder');
            // 如果内容为空,则写入
            if(self.val()===""){ 
                self.val(text).addClass('placeholder');
            }

            // 控件激活,清空placeholder
            self.focus(function(){
                if(self.val()===text){
                    self.val("").removeClass('placeholder');
                }
            // 控件失去焦点,清空placeholder
            }).blur(function(){
                if(self.val()===""){
                    self.val(text).addClass('placeholder');
                }
            });            
        });   
    }
})();

 

posted @ 2017-05-10 16:02  BarryChen89  阅读(2016)  评论(0编辑  收藏  举报