Maison >interface Web >js tutoriel >Explication détaillée du composant d'amplification de la zone de saisie de texte Alipay imitation JS
Explication détaillée du composant d'amplification de la zone de saisie de texte Alipay imitation JS
- 小云云original
- 2018-01-19 13:03:271394parcourir
Cet article vous apporte principalement un exemple de composant d'amplification de la zone de saisie de texte Alipay imitation JS. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Vous pouvez afficher une loupe numérique derrière lors de la saisie
<!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>
<p class="parentCls">
<input type="text" class="inputElem4" autocomplete = "off" maxlength="18"/>
</p>
<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 += '<p class="js-max-input"></p>';
$($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;
}
}
};
Rendu
Recommandations associées ：
JS imitation Alipay affichage d'entrée loupe numérique
JavaScript haute imitation Alipay page de compte à rebours et implémentation du code
JavaScript imitation Alipay saisie du mot de passe box_javascript compétences
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Vue-Router2 implémente l'explication d'un exemple de fonction de routageArticle suivant：Vue-Router2 implémente l'explication d'un exemple de fonction de routage
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript