`
king_tt
  • 浏览: 2083197 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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所有代码:

View Code

demo下载

分享到:
评论

相关推荐

    textMagnifier:输入框放大镜

    textMagnifier输入框放大镜版本:1.1基于:kissy1.2+作者:水澜(1.0) | 明河(1.1)综述仿支付宝的文本输入框放大组件,同时还具有以下特性:拆分规则和分隔符可自定义,例如设置手机号的分割方式为[3,4,4],分割符为...

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

    JS 仿支付宝input文本输入框放大组件&lt;/title&gt; [removed][removed] &lt;style&gt; * { margin: 0; padding: 0; border-width: 1px; } .parentCls {margin:5px 60px 0;} .js-max-input {border: solid 1px ...

    程序天下:JavaScript实例自学手册

    3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似...

    HTML5 CANVAS游戏开发实战(PDF和源代码)

    3.1.1 放大与缩小 / 50 3.1.2 平移 / 53 3.1.3 旋转 / 54 3.1.4 利用transform矩阵实现多样化的变形 / 56 3.2 图形的渲染 / 65 3.2.1 绘制颜色渐变效果的图形 / 65 3.2.2 颜色合成之globalcompositeoperation...

    JAVA上百实例源码以及开源项目源代码

     Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    JAVA上百实例源码以及开源项目

     Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    傲游浏览器3(Maxthon) 3.1.8.1000 正式版

    放大镜坐标改成截图尺寸. 傲游3.1.2.1000正式版重要更新: 英文拼写检查 英文拼写检查可以在你输入过程中提示可能有错误的英文单词, 用红色波浪线进行标注, 在标注上点击鼠标右键可以看到词库的拼写建议. 当然你也...

Global site tag (gtag.js) - Google Analytics