您现在的位置是:网站首页>前端技术

解决IE下input兼容placeholder问题

前端技术阿文2019年6月19日2650浏览

简介当我们做兼容IE、谷歌浏览器页面时时常遇到一些效果不兼容的情况,本文针对IE浏览器下input的placeholder属性不生效问题找到一个js方案,此案例采用Jquery方式实现

        当我们做兼容IE、谷歌浏览器页面时时常遇到一些效果不兼容的情况,本文针对IE浏览器下input 的placeholder属性不生效问题找到一个js方案,此案例采用Jquery方式实现,具体代码如下:

//解决IE input兼容placeholder  //使用方法  $("input").placeholder();
;(function ($) {
    $.fn.placeholder = function (options) {
        var opts = $.extend({}, $.fn.placeholder.defaults, options);
        var isIE = document.all ? true : false;
        return this.each(function () {
            var _this = this,
                placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
            if (isIE) {
                if ($(_this).attr("type") != 'password') {
                    _this.setAttribute("value", placeholderValue);
                    _this.onfocus = function () {
                        $.trim(_this.value) == placeholderValue ? _this.value = "" : '';
                    };
                    _this.onblur = function () {
                        $.trim(_this.value) == "" ? _this.value = placeholderValue : '';
                    };
                }
                else {
                    try {
                        var pwdField = $(_this);
                        var pwdclass = pwdField.prop("class");
                        var pwdVal = pwdField.attr('placeholder');
                        var pwdtabindex = pwdField.attr('tabindex');
                        pwdField.after('<input  class="login-input ' + pwdclass + ' " type="text" value=' + pwdVal + ' value="111" autocomplete="off" />');
                        var pwdPlaceholder = pwdField.siblings('.login-input');
                        if (pwdtabindex != undefined) pwdPlaceholder.attr("tabindex", pwdtabindex);
                        pwdPlaceholder.show();
                        pwdField.hide();
                        pwdPlaceholder.focus(function () {
                            pwdPlaceholder.hide();
                            pwdField.show();
                            pwdField.focus();
                        });
                        pwdField.blur(function () {
                            if (pwdField.val() == '') {
                                pwdPlaceholder.show();
                                pwdField.hide();
                            }
                        });
                    }
                    catch (e)
                    { }
                }
            }
        });
    };
})(jQuery);


标签: Javascript

2

评论文明上网,理性发言0条评论