JS 文本输入框放大镜效果

JS 文本输入框放大镜效果

      今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo

       其实这种效果 对于很多童鞋来说 应该并不陌生！我今年最早也是在 12306官网抢票 中 添加联系人 要填写电话号码中看到这种效果！如下图所示：

      

      所以今天下午也就研究下这个，特此分享出来给大家！也做了一个简单的DEMO jSFiddle链接地址如下：

     JSFiddle链接：

     想要查看效果！请轻轻的点击我！

 基本原理：

     其实基本原理也很简单！通过JS不断的监听输入框值的变化(通过jquery中的keyup事件)，有值的话 把内容值赋值给那显示div上去。

配置参数如下：

inputElem	'.inputElem',    输入框目标元素
parentCls	'.parentCls',     目标元素的父类
align	'top',      　　　对齐方式有 ['top','bottom','left','right']四种 默认为top
splitType	[3,4,4],             拆分规则
delimiter	'-' ,             分隔符可自定义

 组件不足之处:

     1.不支持鼠标右键 中的 复制 剪切 黏贴事件。目前只支持键盘操作。但是KISSY是支持的，因为KISSY有一个valueChange事件 可以不断的监听键盘操作(原理是：用个定时器不断的检测输入框值得变化)，鼠标右键操作等等事件，也就是说可以实时的监听输入框之前值，之后值得变化，但是Jquery目前没有这个事件。所以我目前只用keyup事件来做个demo。虽然网上有很多 关于 oninput && onpropertychange 实时监听输入框值的变化。但是我也试了下 在window7 IE下有问题 特别是IE9下 有严重的问题！就是不支持这个东西！所以也没有用这个来监听。至于KISSY中的 "valueChange"事件方法 我有空的时候 想偷下他们的代码 来改造下！呵呵！

代码分析：

 HTML代码：

<div class="parentCls">
    <input type="text" class="inputElem" autocomplete = "off" maxlength="11"/>
</div>

这样的 父级class 取名为 "parentCls" (需要传入，当然可以自己定义 如上配置项)。当前input默认取名为 "inputElem"（也可以自定义）。HTML结构就是这样的。

现在来分析下JS代码：

1.  初始化，绑定事件：如下代码：

/**
      * 绑定事件
      * @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);
            });
        });
     },

     做了以下事件：1.不断的用keyup监听input值得变化。2. 动态的生成放大效果HTML代码。3.如果输入框值为空 则隐藏掉放大效果div元素，否则 反之！4.就是对元素定位，目前支持四种定位 分别为top（顶部），bottom(底部)，left（左侧），right(右侧)，JSFiddle demo中做了三种定位(上，右，下)。左侧一般不太可能。5.绑定点击焦点和失去焦点事件。(点击焦点显示，失去焦点隐藏)等等。

2. 格式化一下显示方式：代码如下：

/**
      * 格式化下
      * @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);
     },

比如我输入 11122233344 且只能显示11个数字的话 ，假如我用 "-"分隔符 拆分规则是：splitType:[3,4,4] .那么显示方式应该是:111-2223-3344 当然也可以用其他的分隔符显示，上面的代码就做了这么一件事件。基本的就这么点！下面直接贴下代码吧！可以直接看代码 如果有不懂的地方可以留言 谢谢！

HTML代码：

<h2>输入框放大镜的demo</h2>
    <div style="height:50px;"></div>

    <div style="margin-left:56px; margin-top:6px;">我的方向是向上,允许输入长度11位</div>
    <div class="parentCls">
        <input type="text" class="inputElem" autocomplete = "off" maxlength="11"/>
    </div>
    
    <div style="margin-left:56px; margin-top:6px;">我的方向是向右,允许输入长度18位</div>
    <div class="parentCls">
        <input type="text" class="inputElem1" autocomplete = "off" maxlength="18"/>
    </div>
    
    <div style="margin-left:56px; margin-top:6px;">我的方向是向下,允许输入长度18位</div>
    <div class="parentCls">
        <input type="text" class="inputElem2" autocomplete = "off" maxlength="18"/>
    </div>

CSS代码：

* {margin:0;padding:0;}
.parentCls {margin:5px 60px 0;}
 .js-max-input {border: solid 1px #ffd2b2;background: #fffae5;padding: 0 10px 0 10px;font-size:20px;color: #ff4400}

JS所有代码：

/**
 * JS 文本输入框放大镜效果
 * @author tugenhua
 * @time 2014-1-16
 */ 

 function TextMagnifier(options) {

     this.config = {
        
        inputElem          :     '.inputElem',     // 输入框目标元素
        parentCls          :     '.parentCls',     // 目标元素的父类
        align              :     'top',            // 对齐方式有 ['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;
        }
     }
 };

demo下载