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;

        }

     }

 };

效果图

JS 仿支付宝input文本输入框放大组件的更多相关文章

  1. Text input(文本输入框)

    Text input(文本输入框)是用来获得用户输入的绝佳方式. 你可以用如下方法创建: <input type="text"> 注意,input元素是自关闭的.

  2. 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  3. html禁止文本输入框记录输入记录，单击input出现输入过的记录

    其实方法很简单,只需要在input文本输入框中加一条autocomplete="off"属性即可. <input type="text" name=&qu ...

  4. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  5. [js开源组件开发]js文本框计数组件

    js文本框计数组件 先上效果图: 样式可以自行调整 ,它的功能提供文本框的实时计数,并作出对应的操作,比如现在超出了,点击下面的按钮后,文本框会闪动两下,阻止提交.具体例子可以点击demo:http: ...

  6. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  7. 仿支付宝/微信的password输入框效果GridPasswordView解析

    仿支付宝/微信的password输入框效果GridPasswordView解析,把一些设置和一些关键的地方列了出来,方便大家使用,可能能够省一部分的时间,也算是自己的积累吧. 1.password框能 ...

  8. 文本输入框input将输入转换为统一大小写

    转载地址:http://blog.csdn.net/yieryi_/article/details/52078596 文本输入框input将输入转换为统一大小写,通常有两种方法:JS和CSS方法. 1 ...

  9. HTML中&lt;input&gt;參数，以及文本输入框，文本域的解说

    <form> <input type="text/password" name="名称" value="文本" /> ...

随机推荐

  1. TypeScript 高级类型 类(class)

    传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员来讲就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的. 从ECMAScript ...

  2. STM32之外部中断

    图1.0 图1.1 中断控制器支持23条中断线,其中16条是IO管脚中断线,分别是EXTI0~EXTI15:  图 1.2 另外七根中断线如下图: 中断线和管脚的对应关系:EXTI0~EXTI15 和 ...

  3. Python29之字符str与字节bytes

    详解见这位大神:https://www.cnblogs.com/xiaobingqianrui/p/9870480.html 实际上字符串和字节之间的转换过程,就是编码解码的过程,我们必须显示的指定编 ...

  4. centos7安装php7.3的redis扩展（不是redis服务！）

    PHP其他扩展加装扩展也是一样的步骤~ PHP官网下载redis扩展: http://pecl.php.net/package/redis 稳定版吧: [root@wf ~]# wget http:/ ...

  5. python学习-60 面向对象设计

    面向对象设计 1.三大编程范式 --面向过程编程 --函数式编程 --面向对象编程 2.编程进化论 --编程最开始就是无组织无结构,从简单控制流中按步写指令 --从上述的指令中提取重复的代码快或逻辑, ...

  6. python基础 — CSV 数据处理

    什么是csv 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本) 编码: encode  ...

  7. Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)

    custom form control 之前就写过了,这里简单写一下. 创建一个组件实现 ControlValueAccessor 接口 @Component({ providers: [ { pro ...

  8. DO、VO、DTO 区别

    DTO:数据传输对象,主要用于外部接口参数传递封装,接口与接口进行传递使用. VO:视图对象,主要用于给前端返回页面参数使用. DO:数据对象,主要用于数据库层传递. DTO转DO:接口接收参数将参数 ...

  9. #448 div2 a Pizza Separation

    A. Pizza Separation time limit per test1 second memory limit per test256 megabytes inputstandard inp ...

  10. 在论坛中出现的比较难的sql问题：40(子查询 销售和历史库存)

    原文:在论坛中出现的比较难的sql问题:40(子查询 销售和历史库存) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有 ...