Example of JS imitating Alipay input text input box amplification component-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Example of JS imitating Alipay input text input box amplification component

韦小宝

Jan 08, 2018 am 10:54 AM

inputjavascriptenlarge

The following editor will bring you an example of a JS imitation Alipay input text input box amplification component. The editor thinks it’s pretty good, so I’ll share the js source code with you now and give it as a reference. If you are interested in js, please follow the editor to take a look.

You can display a digital magnifying glass at the back when inputting

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

The above example of the JS imitation Alipay input text input box amplification component is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

js magnifying glass effect to enlarge pictures

Commonly used js magnifying glass effect on e-commerce websites

jquery Click on the text content to enlarge and center it Example sharing

The above is the detailed content of Example of JS imitating Alipay input text input box amplification component. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn