当前位置:首页 > 开发 > Web前端 > 前端 > 正文

placeholder的浏览器兼容

发表于: 2015-05-27   作者:120153216   来源:转载   浏览:
摘要: 【前言】 自从html5引入placeholder后,问题就来了, 不支持html5的浏览器也先有这样的效果, 各种兼容,之前考虑,今天测试人员逮住不放, 想了个解决办法,看样子还行,记录一下。   【原理】 不使用placeholder,而是模拟placeholder的效果, 大概就是用focus和focusout效果。   【代码】 <scrip

【前言】

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

 

placeholder的浏览器兼容

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号