Exemple de JS imitant le composant d'amplification de la zone de saisie de texte d'entrée Alipay-js tutoriel-php.cn

Exemple de JS imitant le composant d'amplification de la zone de saisie de texte d'entrée Alipay

韦小宝

Libérer： 2018-01-08 10:54:46

original

1079 Les gens l'ont consulté

L'éditeur suivant vous présentera un exemple de composant d'amplification de la zone de saisie de texte Alipay imitation JS. L'éditeur pense que c'est plutôt bien, je vais donc partager le code source js avec vous maintenant et le donner comme référence. Si vous êtes intéressé par js, veuillez suivre l'éditeur pour y jeter un œil

Lors de la saisie, vous pouvez afficher une loupe numérique à l'arrière

<!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: &#39;.inputElem4&#39;,
    align: &#39;bottom&#39;,
    splitType: [6,4,4,4]
   });
   });
  </script>
 </body>
</html>

Copier après la connexion

/**
 * JS 仿支付宝的文本输入框放大组件
 */ 


 function TextMagnifier(options) {

  this.config = {
  
  inputElem   :  &#39;.inputElem&#39;,  // 输入框目标元素
  parentCls   :  &#39;.parentCls&#39;,  // 目标元素的父类
  align    :  &#39;right&#39;,   // 对齐方式有 [&#39;top&#39;,&#39;bottom&#39;,&#39;left&#39;,&#39;right&#39;]四种 默认为top
  splitType   :  [3,4,4],   // 拆分规则
  delimiter   :  &#39;-&#39;    // 分隔符可自定义
  };

  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 = &#39;&#39;,
    $parent = $($this).closest(_config.parentCls);

    if($(&#39;.js-max-input&#39;,$parent).length == 0) {
    html += &#39;<p class="js-max-input"></p>&#39;;
    $($parent).append(html);
    }
    var value = self._formatStr(value);
    $(&#39;.js-max-input&#39;,$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 = $(&#39;.js-max-input&#39;,elemParent).outerHeight(); 
  
  $(elemParent).css({"position":&#39;relative&#39;});
  
  switch(true){
   
   case _config.align == &#39;top&#39;:
    
    $(&#39;.js-max-input&#39;,elemParent).css({&#39;position&#39;:&#39;absolute&#39;,&#39;top&#39; :-elemHeight - containerHeight/2,&#39;left&#39;:0});
    break;
   
   case _config.align == &#39;left&#39;:

    $(&#39;.js-max-input&#39;,elemParent).css({&#39;position&#39;:&#39;absolute&#39;,&#39;top&#39; :0,&#39;left&#39;:0});
    break;
   
   case _config.align == &#39;bottom&#39;:

    $(&#39;.js-max-input&#39;,elemParent).css({&#39;position&#39;:&#39;absolute&#39;,&#39;top&#39; :elemHeight + 4 + &#39;px&#39;,&#39;left&#39;:0});
    break;
   
   case _config.align == &#39;right&#39;:

    $(&#39;.js-max-input&#39;,elemParent).css({&#39;position&#39;:&#39;absolute&#39;,&#39;top&#39; :0,&#39;left&#39;:elemWidth + 2 + &#39;px&#39;});
    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 == &#39;&#39;) {
     self._hide(parent);
    }else {

     var html = $.trim($(&#39;.js-max-input&#39;,parent).html());

     if(html != &#39;&#39;) {
      self._show(parent);
     }
    }
    self._appendHTML($(this),value);
    self._position($(this));
   });

   $(item).unbind(&#39;focusin&#39;);
   $(item).bind(&#39;focusin&#39;,function(){
    var parent = $(this).closest(_config.parentCls),
     html = $.trim($(&#39;.js-max-input&#39;,parent).html());

    if(html != &#39;&#39;) {
     self._show(parent);
    }
   });

   $(item).unbind(&#39;focusout&#39;);
   $(item).bind(&#39;focusout&#39;,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) {
   $(&#39;.js-max-input&#39;,parent).show();
   _cache.isFlag = true;
  }
  },
  /*
  * 隐藏 放大容器
  * @method hide
  * {public}
  */
  _hide: function(parent) {
  var self = this,
   _config = self.config,
   _cache = self.cache;
  if(_cache.isFlag) {
   $(&#39;.js-max-input&#39;,parent).hide();
   _cache.isFlag = false;
  }
  }
 };

Copier après la connexion

Rendu

L'exemple ci-dessus du composant d'amplification de la zone de saisie de texte d'entrée Alipay JS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et je. j'espère que vous pourrez davantage prendre en charge le site Web chinois.

Recommandations associées :

Effet de loupe js pour agrandir les images

Effet de loupe js couramment utilisé sur les sites de commerce électronique

jquery cliquez sur le contenu du texte pour agrandir et centrer l'exemple à partager

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!