placeholder的浏览器兼容

【前言】

自从html5引入placeholder后，问题就来了，

不支持html5的浏览器也先有这样的效果，

各种兼容，之前考虑，今天测试人员逮住不放，

想了个解决办法，看样子还行，记录一下。

 

【原理】

不使用placeholder，而是模拟placeholder的效果，

大概就是用focus和focusout效果。

 

【代码】

<script>
    $(function(){
        $('input.holder').each(function(){
            var $this = $(this);
            var holder = $this.data('holder');
            if(holder){
                $this.css('color','#afafaf').val(holder);
            }
        });
         
        $(document)
        .off('focus', 'input.holder')
        .on('focus', 'input.holder',function(){
            var $this = $(this);
            if($this.val() === $this.data('holder')){
                $this.css('color','black').val('');
            }
        });
         
        $(document)
        .off('focusout', 'input.holder')
        .on('focusout', 'input.holder',function(){
            var $this = $(this);
            if($.trim($this.val()) === ''){
                $this.css('color','#afafaf').val($this.data('holder'));
            }
        });
    });
</script>

 【注意】

input需要添加class="holder"和data-holder="内容"