码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-05-10 16:29:44      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:hold   style   事件   var   pre   nbsp   text   bsp   creat   

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

 

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

标签:hold   style   事件   var   pre   nbsp   text   bsp   creat   

原文地址:http://www.cnblogs.com/barrychen/p/6836418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!