设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 29|回复: 0

[javascript] JS 仿支付宝input文本输入框放大组件

[复制链接]
发表于 2018-1-30 16:05:09 | 显示全部楼层 |阅读模式
input输入的时候可以在后边显示数字放大镜
  1. <!doctype html > <
  2. html lang="en" > <
  3. head > <
  4. meta charset="UTF-8" > <
  5. title >JS 仿支付宝input文本输入框放大组件 </title > <
  6. script src="js/jquery.min.js" > </script > <
  7. style >
  8. * {
  9. margin:0;
  10. padding:0;
  11. border-width:1px;
  12. }
  13. .parentCls {
  14. margin:5px 60px 0;
  15. }
  16. .js-max-input {
  17. border:solid 1px #ffd2b2;
  18. position:relative;
  19. background:#fffae5;
  20. padding:0 10px 0 10px;
  21. font-size:20px;
  22. color:#ff4400}
  23. .inputElem4{
  24. width:300px;
  25. height:36px;
  26. border:1px solid #E0E0E0;
  27. padding-left:10px;
  28. line-height:36px;
  29. font-size:14px;
  30. } </style > </head > <
  31. body > <
  32. div class="parentCls" > <
  33. input type="text"class="inputElem4"autocomplete = "off"maxlength="18"/ > </div > <
  34. script src="js/jq22.js" > </script > <
  35. script > //初始化 $(function(){newTextMagnifier({ inputElem: '.inputElem4', align: 'bottom', splitType: [6,4,4,4] }); }); </script > </body > </html >
复制代码
  1. /** * JS 仿支付宝的文本输入框放大组件 */
  2. functionTextMagnifier(options) {
  3. this.config ={ inputElem : '.inputElem', //输入框目标元素 parentCls : '.parentCls', //目标元素的父类 align : 'right', //对齐方式有 ['top','bottom','left','right']四种 默认为top splitType : [3,4,4], //拆分规则 delimiter : '-' //分隔符可自定义 };
  4. this.cache ={ isFlag : false };this.init(options); }
  5. TextMagnifier.prototype ={ constructor: TextMagnifier, init: function(options) {this.config = $.extend(this.config,options ||{});varself = this, _config =self.config, _cache =self.cache; self._bindEnv(); }, /* * 在body后动态添加HTML内容 * @method _appendHTML */
  6. _appendHTML: function($this,value) {varself = this, _config =self.config, _cache =self.cache;
  7. varhtml = '', $parent = $($this).closest(_config.parentCls);
  8. if($('.js-max-input',$parent).length == 0) { html += ' <div class="js-max-input" > </div >'; $($parent).append(html); }varvalue =self._formatStr(value); $('.js-max-input',$parent).html(value); }, /* * 给目标元素定位 * @method _position * @param target */
  9. _position: function(target){varself = this, _config =self.config;varelemWidth =$(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 */
  10. _bindEnv: function(){varself = this, _config =self.config, _cache =self.cache;
  11. //实时监听输入框值的变化 $(_config.inputElem).each(function(index,item){
  12. $(item).keyup(function(e){varvalue =$.trim(e.target.value), parent = $(this).closest(_config.parentCls);if(value == '') { self._hide(parent); }
  13. else{
  14. varhtml = $.trim($('.js-max-input',parent).html());
  15. if(html != '') { self._show(parent); } } self._appendHTML($(this),value); self._position($(this)); });
  16. $(item).unbind('focusin'); $(item).bind('focusin',function(){varparent = $(this).closest(_config.parentCls), html = $.trim($('.js-max-input',parent).html());
  17. if(html != '') { self._show(parent); } });
  18. $(item).unbind('focusout'); $(item).bind('focusout',function(){varparent = $(this).closest(_config.parentCls); self._hide(parent); }); }); }, /** * 格式化下 * @method _formatStr */
  19. _formatStr: function(str){varself = this, _config =self.config, _cache =self.cache;varcount = 0, output =[];for(vari = 0, ilen = _config.splitType.length; i < ilen; i++){vars =str.substr(count,_config.splitType[i]);if(s.length > 0){ output.push(s); } count+=_config.splitType[i]; }returnoutput.join(_config.delimiter); }, /* * 显示 放大容器 * @method _show */
  20. _show: function(parent) {varself = this, _config =self.config, _cache =self.cache;if(!_cache.isFlag) { $('.js-max-input',parent).show(); _cache.isFlag = true; } }, /* * 隐藏 放大容器 * @method hide * {public}*/
  21. _hide: function(parent) {varself = this, _config =self.config, _cache =self.cache;if(_cache.isFlag) { $('.js-max-input',parent).hide(); _cache.isFlag = false; } } };<br>
  22.          <br>
  23.          <br>
复制代码

效果图



上一篇:Md5Util
下一篇:php开发者与composer的不得不说故事
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-5-25 20:30

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表