本文就为大家带来一篇JS 仿支付宝input文本输入框放大组件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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

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

* { 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; }

// 初始化

$(function(){

new TextMagnifier({

inputElem: '.inputElem4',

align: 'bottom',

splitType: [6,4,4,4]

});

});

/**

* 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 += '

$($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;

}

}

};

效果图

相关推荐：