本文就為大家帶來一篇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;

}

}

};

效果圖

相關推薦：

總結

以上是生活随笔為你收集整理的html5输入框自动放大镜,JS 仿支付宝input输入显示数字放大镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。