suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für JS, das die Alipay-Eingabetext-Eingabefeld-Verstärkungskomponente imitiert

Beispiel für JS, das die Alipay-Eingabetext-Eingabefeld-Verstärkungskomponente imitiert

韦小宝
韦小宝Original
2018-01-08 10:54:461055Durchsuche

Der folgende Editor zeigt Ihnen ein Beispiel einer JS-imitierten Alipay-Eingabetext-Eingabefeld-Verstärkungskomponente. Der Herausgeber findet es ziemlich gut, deshalb teile ich jetzt den js-Quellcode mit Ihnen und gebe ihn als Referenz. Wenn Sie sich für js interessieren, folgen Sie bitte dem Editor, um einen Blick darauf zu werfen

Bei der Eingabe können Sie auf der Rückseite eine digitale Lupe anzeigen


<!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>



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


Rendering

Das obige Beispiel der JS-Imitation der Alipay-Eingabetext-Eingabefeld-Verstärkungskomponente ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, es kann Ihnen eine Referenz geben, und ich Ich hoffe, Sie können die chinesische Website besser unterstützen.

Verwandte Empfehlungen:

js-Lupeneffekt zum Vergrößern von Bildern

Häufig verwendeter js-Lupeneffekt auf E-Commerce-Websites

jquery Klicken Sie auf den Textinhalt, um das Beispiel zu vergrößern und zu zentrieren, um es zu teilen

Das obige ist der detaillierte Inhalt vonBeispiel für JS, das die Alipay-Eingabetext-Eingabefeld-Verstärkungskomponente imitiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery JS input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für das Verschieben von Daten in einem Array nach oben und unten mithilfe von jsNächster Artikel：Beispiel für das Verschieben von Daten in einem Array nach oben und unten mithilfe von js

In Verbindung stehende Artikel

Mehr sehen