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:;padding:;}
.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下载

JS 文本输入框放大镜效果的更多相关文章

  1. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  2. 前端JS电商放大镜效果

    前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  4. js代码实现放大镜效果

    每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...

  5. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  6. js---电商中常见的放大镜效果

    js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...

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

    input输入的时候可以在后边显示数字放大镜 <!doctype html> <html lang="en"> <head> <meta ...

  8. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  9. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

随机推荐

  1. List转换成Json、对象集合转换Json等

    #region List转换成Json /// <summary> /// List转换成Json /// </summary> public static string Li ...

  2. Linux性能监控之Memory篇

    首先说说虚拟内存和物理内存: 虚拟内存就是采用硬盘来对物理内存进行扩展,将暂时不用的内存页写到硬盘上而腾出更多的物理内存让有需要的进程来用.当这些内存页需要用的时候在从硬盘读回内存.这一切对于用户来说 ...

  3. Oracle11g TNS-12541:TNS无监听程序

    Oracle11g TNS-12541:TNS 无监听程序 问题描述:Oracle11.2客户端访问服务器端服务一直正常,隔了一段时间没有用,再次连接时出现错误“TNS-12541:TNS 无监听程序 ...

  4. Hadoop-安装过程-单虚拟机版(伪分布式)(Ubuntu13.04版本下安装)

    由于新装的Ubutu默认情况下,系统只安装了SSH客户端,需要自行安装SSH服务端 如何确定是否安装了SSH服务端? 可以通过命令ssh localhost,结果如下,即未安装SSH服务端:   安装 ...

  5. 自动化运维工具ansible-如何设置客户端多python版本问题

    问题:在使用ansible进行管理客户主机时,发现客户主机安装了多个版本的python,并且默认版本为3.0 shell>>cat list 192.168.2.9 shell>&g ...

  6. 第三百零三天 how can I 坚持

    今天年会,运气还不错,竟然中了个小奖,一个榨汁机,已经很满足了. 今天加上了她,感觉挺合适,就怕一句话聊不来就带搭不理的了.她很好,懂得知足,不攀比. 弟弟今天把房子首付交了,把贷款办完就算安心了,目 ...

  7. CoffeeScript学习(3)—— 函数

    CoffeeScript函数 如果大家有看我之前关于ES6的箭头函数的话,这一篇也不会很难理解.我们这一次可以说一下,关于两者的一些细微差别. 基本 在CoffeeScript中,任何函数都是用箭头函 ...

  8. shell下解码url

    http://aaronw.me/static/779.html 封装了一下,有需要的拿走 function url_decode() { local url=$ echo $url | awk 'B ...

  9. 【转】iOS 浅谈:深.浅拷贝与copy.strong

    深.浅拷贝 copy mutableCopy NSString 1 2 3 4 5 6 NSString *string = @"汉斯哈哈哈"; // 没有产生新对象 NSStri ...

  10. HDU 5831 Rikka with Parenthesis II (栈+模拟)

    Rikka with Parenthesis II 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5831 Description As we kno ...