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

Posted 2020-09-17

以下代码解决了在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‘);
                }
            });            
        });   
    }
})();