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="内容"

 

你可能感兴趣的