JS 仿支付宝input文本输入框放大组件

2018-06-27 09:10:13来源：未知阅读 ()

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