JS 仿支付宝input文本输入框放大组件的实例
程序员文章站
2022-03-22 16:35:16
input输入的时候可以在后边显示数字放大镜
input输入的时候可以在后边显示数字放大镜
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<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 class="parentcls">
<input type="text" class="inputelem4" autocomplete = "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>
/**
* 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 += '<div class="js-max-input"></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',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;
}
}
};
效果图
以上这篇js 仿支付宝input文本输入框放大组件的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。