微信小程序模板是啥_JS 仿支付宝input文本输入框

2021-01-11 13:03| 发布者: | 查看: |

JS 仿支付宝input文本输入框放大组件的实例       下面小编就为大家带来一篇JS 仿支付宝input文本输入框放大组件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
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 input type="text" plete = "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
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();
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 { ()); 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), ()); 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; };

效果图

以上这篇JS 仿支付宝input文本输入框放大组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部