当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
原文:http://www.zhangxinxu.com/wordpress/?p=2169 一、HTML5 placeholder相关的引言 placeholder
1、什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者texta
如何实现跨浏览器的placeholder效果呢? 先看下效果 js代码如下: $('#username').placeholder({ word
如何实现跨浏览器的placeholder效果呢? 先看下效果 js代码如下: $('#username').placeholder({ word
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。 转文请标明 --- 出处
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。 先说说min-height。
ExtJS布局浏览器兼容问题 在写ExtJS前台进行布局时由于ExtJS本身的布局管理器会产生默认的一些布局
min-height和min-width这两个最小高度和最小宽度的容器属性相信大家并不陌生。 先说说min-height。
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号