码迷,mamicode.com
首页 > Web开发 > 详细

跨浏览器实现placeholder效果的jQuery插件

时间:2018-02-09 15:29:56      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:blog   idt   hid   pad   rip   lower   width   func   模拟   

曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性。几经周折,这个方案是可以解决问题的。

1、jsp页面引入js插件

<script type="text/javascript" src="<%=basePath%>/login.js" ></script>

2、页面初始化代码

<script type="text/javascript">
//input提示信息 效果插件 针对ie8处理
 $(function() {
        if(!(‘placeholder‘ in document.createElement(‘input‘))){ 

            $(‘#password‘).placeholder({isUseSpan:true});
        }
        
    });

</script>

3、页面标签代码

<input id="password" name="j_password" class="input_text input_open" placeholder="请输入密码" type="password"  >

4、插件placeholder.js

/** 
 * jQuery EnPlaceholder plug 
 * 跨浏览器实现placeholder效果的jQuery插件 
 * version 1.0 
 * } 
 */
 //
//  var defaultValue = "账号";     
(function ($) {
    $.fn.extend({  
        "placeholder":function (options) {  
            options = $.extend({  
                placeholderColor:‘#BABABA‘,    //#ACA899
                isUseSpan:false, //是否使用插入span标签模拟placeholder的方式,默认false,默认使用value模拟  
                onInput:true  //使用标签模拟(isUseSpan为true)时,是否绑定onInput事件取代focus/blur事件  
            }, options);  
              
            $(this).each(function () {  
                var _this = this;  
                var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘);  
                if (!supportPlaceholder) {  
                    var defaultValue = $(_this).attr(‘placeholder‘);  
                    //修正无placeholder时,显示undefined问题  
                    if(defaultValue != null && typeof(defaultValue) != "undefined"){  
                        var defaultColor = $(_this).css(‘color‘);  
                        if (options.isUseSpan == false) {  
                            $(_this).focus(function () {  
                                var pattern = new RegExp("^" + defaultValue + "$|^$");  
                                pattern.test($(_this).val()) && $(_this).val(‘‘).css(‘color‘, defaultColor);  
                            }).blur(function () {  
                                    if ($(_this).val() == defaultValue) {  
                                        $(_this).css(‘color‘, defaultColor);  
                                    } else if ($(_this).val().length == 0) {  
                                        $(_this).val(defaultValue).css(‘color‘, options.placeholderColor);
                                    }  
                                }).trigger(‘blur‘);  
                        } else {  
                            var $imitate = $(‘<span class="wrap-placeholder" style="position:absolute; left:85px; display:inline-block; overflow:hidden; color:‘+options.placeholderColor+‘; width:‘+$(_this).outerWidth()+‘px; height:‘+$(_this).outerHeight()+‘px;">‘ + defaultValue + ‘</span>‘);  
                            $imitate.css({  
                                ‘margin-left‘:$(_this).css(‘margin-left‘),  
                                ‘margin-top‘:$(_this).css(‘margin-top‘),  
                                ‘font-size‘:$(_this).css(‘font-size‘),  
                                ‘font-family‘:$(_this).css(‘font-family‘),  
                                ‘font-weight‘:$(_this).css(‘font-weight‘),  
                                ‘padding-left‘:parseInt($(_this).css(‘padding-left‘)) + 2 + ‘px‘,  
                                ‘line-height‘:_this.nodeName.toLowerCase() == ‘textarea‘ ? $(_this).css(‘line-weight‘) : $(_this).outerHeight() + ‘px‘,  
                                ‘padding-top‘:_this.nodeName.toLowerCase() == ‘textarea‘ ? parseInt($(_this).css(‘padding-top‘)) + 2 : 0  
                            });  
                            $(_this).before($imitate.click(function () {  
                                $(_this).trigger(‘focus‘);  
                            }));  
  
                            $(_this).val().length != 0 && $imitate.hide();  
  
                            if (options.onInput) {  
                                //绑定oninput/onpropertychange事件  
                                var inputChangeEvent = typeof(_this.oninput) == ‘object‘ ? ‘input‘ : ‘propertychange‘;  
                                $(_this).bind(inputChangeEvent, function () {  
                                    $imitate[0].style.display = $(_this).val().length != 0 ? ‘none‘ : ‘inline-block‘;  
                                });  
                            } else {  
                                $(_this).focus(function () {  
                                    $imitate.hide();  
                                }).blur(function () {  
                                        /^$/.test($(_this).val()) && $imitate.show();  
                                    });  
                            }  
                        }  
                    }  
                }  
            });  
            return this;  
        }  
    });  
})(jQuery);   

5、GAME OVER

跨浏览器实现placeholder效果的jQuery插件

标签:blog   idt   hid   pad   rip   lower   width   func   模拟   

原文地址:https://www.cnblogs.com/city-light/p/8434597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!