JS 仿支付宝input文本输入框放大组件的实例

前端之家收集整理的这篇文章主要介绍了JS 仿支付宝input文本输入框放大组件的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

input输入的时候可以在后边显示数字放大镜

<Meta charset="UTF-8"> JS 仿支付宝input文本输入框放大组件
function TextMagnifier(options) {

this.config = {

inputElem : '.inputElem',// 输入框目标元素
parentCls : '.parentCls',// 目标元素的父类
align : 'right',// 对齐方式有 ['top','bottom','left','right']四种 默认为top
splitType : [3,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,_cache = self.cache;

var html = '',$parent = $($this).closest(_config.parentCls);

if($('.js-max-input',$parent).length == 0) {
html += '<div class="js-max-input"&gt;</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','top' :0,'left':0});
break;

case _config.align == 'bottom':

$('.js-max-input','top' :elemHeight + 4 + 'px','left':0});
break;

case _config.align == 'right':

$('.js-max-input','left':elemWidth + 2 + 'px'});
break;

}
},/**

  • 绑定事件
  • @method _bindEnv
    */
    _bindEnv: function(){
    var self = this,_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,_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,_cache = self.cache;
    if(!_cache.isFlag) {
    $('.js-max-input',parent).show();
    _cache.isFlag = true;
    }
    },/
  • 隐藏 放大容器
  • @method hide
  • {public}
    */
    _hide: function(parent) {
    var self = this,_cache = self.cache;
    if(_cache.isFlag) {
    $('.js-max-input',parent).hide();
    _cache.isFlag = false;
    }
    }
    };

效果

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

猜你在找的JavaScript相关文章