JS 仿支付宝input文本输入框放大组件的实例
2018-01-05 1184
input输入的时候可以在后边显示数字放大镜
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 仿支付宝input文本输入框放大组件</title> <script src="js/jquery.min.js"></script> <style> * { margin: 0; padding: 0; border-width: 1px; } .parentCls {margin:5px 60px 0;} .js-max-input {border: solid 1px #ffd2b2; position:relative;background: #fffae5;padding: 0 10px 0 10px;font-size:20px;color: #ff4400} .inputElem4{ width: 300px; height: 36px; border: 1px solid #E0E0E0; padding-left: 10px; line-height: 36px; font-size: 14px; } </style> </head> <body> <div class="parentCls"> <input type="text" class="inputElem4" autocomplete = "off" maxlength="18"/> </div> <script src="js/jq22.js"></script> <script> // 初始化 $(function(){ new TextMagnifier({ inputElem: '.inputElem4', align: 'bottom', splitType: [6,4,4,4] }); }); </script> </body> </html> |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | /** * JS 仿支付宝的文本输入框放大组件 */ function TextMagnifier(options) { this.config = { inputElem : '.inputElem', // 输入框目标元素 parentCls : '.parentCls', // 目标元素的父类 align : 'right', // 对齐方式有 ['top','bottom','left','right']四种 默认为top splitType : [3,4,4], // 拆分规则 delimiter : '-' // 分隔符可自定义 }; this.cache = { isFlag : false }; this.init(options); } TextMagnifier.prototype = { constructor: TextMagnifier, init: function(options) { this.config = $.extend(this.config,options || {}); var self = this, _config = self.config, _cache = self.cache; self._bindEnv(); }, /* * 在body后动态添加HTML内容 * @method _appendHTML */ _appendHTML: function($this,value) { var self = this, _config = self.config, _cache = self.cache; var html = '', $parent = $($this).closest(_config.parentCls); if($('.js-max-input',$parent).length == 0) { html += '<div class="js-max-input"></div>'; $($parent).append(html); } var value = self._formatStr(value); $('.js-max-input',$parent).html(value); }, /* * 给目标元素定位 * @method _position * @param target */ _position: function(target){ var self = this, _config = self.config; var elemWidth = $(target).outerWidth(), elemHeight = $(target).outerHeight(), elemParent = $(target).closest(_config.parentCls), containerHeight = $('.js-max-input',elemParent).outerHeight(); $(elemParent).css({"position":'relative'}); switch(true){ case _config.align == 'top': $('.js-max-input',elemParent).css({'position':'absolute','top' :-elemHeight - containerHeight/2,'left':0}); break; case _config.align == 'left': $('.js-max-input',elemParent).css({'position':'absolute','top' :0,'left':0}); break; case _config.align == 'bottom': $('.js-max-input',elemParent).css({'position':'absolute','top' :elemHeight + 4 + 'px','left':0}); break; case _config.align == 'right': $('.js-max-input',elemParent).css({'position':'absolute','top' :0,'left':elemWidth + 2 + 'px'}); break; } }, /** * 绑定事件 * @method _bindEnv */ _bindEnv: function(){ var self = this, _config = self.config, _cache = self.cache; // 实时监听输入框值的变化 $(_config.inputElem).each(function(index,item){ $(item).keyup(function(e){ var value = $.trim(e.target.value), parent = $(this).closest(_config.parentCls); if(value == '') { self._hide(parent); }else { var html = $.trim($('.js-max-input',parent).html()); if(html != '') { self._show(parent); } } self._appendHTML($(this),value); self._position($(this)); }); $(item).unbind('focusin'); $(item).bind('focusin',function(){ var parent = $(this).closest(_config.parentCls), html = $.trim($('.js-max-input',parent).html()); if(html != '') { self._show(parent); } }); $(item).unbind('focusout'); $(item).bind('focusout',function(){ var parent = $(this).closest(_config.parentCls); self._hide(parent); }); }); }, /** * 格式化下 * @method _formatStr */ _formatStr: function(str){ var self = this, _config = self.config, _cache = self.cache; var count = 0, output = []; for(var i = 0, ilen = _config.splitType.length; i < ilen; i++){ var s = str.substr(count,_config.splitType[i]); if(s.length > 0){ output.push(s); } count+= _config.splitType[i]; } return output.join(_config.delimiter); }, /* * 显示 放大容器 * @method _show */ _show: function(parent) { var self = this, _config = self.config, _cache = self.cache; if(!_cache.isFlag) { $('.js-max-input',parent).show(); _cache.isFlag = true; } }, /* * 隐藏 放大容器 * @method hide * {public} */ _hide: function(parent) { var self = this, _config = self.config, _cache = self.cache; if(_cache.isFlag) { $('.js-max-input',parent).hide(); _cache.isFlag = false; } } }; |
