实现IE浏览器兼容placeholder效果

placeholder是HTML5的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果,
在Chrome( v31.0.1650.63 m)、Firefox( v21.0 )、360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,但是IE6-IE9 是不支持placeholder属性的。

思路是,首先判断浏览器是否支持placeholder属性,如果不支持的话,就遍历所有input输入框,获取placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色。

        var browser=navigator.appName;
        var b_version=navigator.appVersion;
        var version=b_version.split(";");
        var trim_Version=version[1].replace(/[ ]/g,"");
        if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0"){
            function holder(Iip){
                var txtHolder=Iip.attr("placeholder");
                Iip.val(txtHolder).addClass("hint");
                Iip.attr("type","text");
                Iip.focus(function(){
                    if($(this).val() == txtHolder){
                        $(this).val("").removeClass("hint");
                    }
                    if(Iip.attr("name")=="password"){
                        Iip.attr("type","password");
                    }
                }).blur(function(){
                    if($(this).val().trim() === ""){
                        $(this).val(txtHolder).addClass("hint");
                        Iip.attr("type","text");
                    }
                });
            }
        }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值