IE兼容-placeholder的方法

来源：互联网发布：泉州淘宝美工速成班编辑：程序博客网时间：2024/05/16 05:36

由于IE8以下的浏览器不支持placeholder。
然后通常解决浏览器兼容的问题都是两种思路嘛，一种就是平滑下降，去掉功能。另一种就是写一个（或者找一个）实现这个功能的库。
而因为交互的原因，使用placeholder后，如果删去，对网站的功能会造成很大的影响，所以也只好用写库代替的方法了。

一、首先是网上摘录的一个自动填写value的方法

$(function(){       handlePlaceholderForIE();});//原始从网上摘录的方法 function handlePlaceholderForIE() {            // placeholder attribute for ie7 & ie8            if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 9) {                // ie7&ie8                jQuery('input[placeholder], textarea[placeholder]').each(function () {                    var input = jQuery(this);                    jQuery(input).val(input.attr('placeholder'));                    jQuery(input).focus(function () {                        if (input.val() == input.attr('placeholder')) {                            input.val('');                        }                    });                    jQuery(input).blur(function () {                        if (input.val() == '' || input.val() == input.attr('placeholder')) {                            input.val(input.attr('placeholder'));                        }                    });                });            }        }

然后这个方法会有缺陷，就是如果input是密码的话，则填写上去的内容会是两个小黑点

二、知乎的方法

记忆中，知乎的方法是在placeholder附近加上一个带文字的label，然后在密码的input中，使用label覆盖上去，代替value文字。根据这个思路，修改代码为：

//修改版后function handlePlaceholderForIE() {            // placeholder attribute for ie7 & ie8            if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 9) {                // ie7&ie8                jQuery('input[placeholder], textarea[placeholder]').each(function () {                    var input = jQuery(this);                    if(input.attr("type") == "password"){                        $("#txtPwd_l").show()                    }else{                        jQuery(input).val(input.attr('placeholder'));                    }                    jQuery(input).focus(function () {                        if(input.attr("type") == "password"){                            $("#txtPwd_l").hide();                        }                        if (input.val() == input.attr('placeholder')) {                            input.val('');                        }                    });                    jQuery(input).blur(function () {                            if (input.val() == '' || input.val() == input.attr('placeholder')) {                                if(input.attr("type") == "password"){                                    $("#txtPwd_l").show()                                }else{                                    input.val(input.attr('placeholder'));                                }                            }                    });                });            }        }//<input class="fxnloginnew" id="prePwd" style="background:#fff\0;" type="password" value="" placeholder="密码"><label id="txtPwd_l" style="display:none;  position: absolute;top: 35px;  left: 10px;color:#898989;">密码</label>

三、最终方法

然而为了使用方便，觉得可以写一个js，直接依靠js来生成label，这样就可以更加傻瓜的使用这个函数了。
//因此最终觉得可以写一个JS的插件
//然而因为我懒，还没有写出来，哈哈哈哈哈哈
//by 2015.8.12

0 0