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输入框放大镜版本:1.1基于:kissy1.2+作者:水澜(1.0) | 明河(1.1)综述仿支付宝的文本输入框放大组件,同时还具有以下特性:拆分规则和分隔符可自定义,例如设置手机号的分割方式为[3,4,4],分割符为...
JS 仿支付宝input文本输入框放大组件</title> [removed][removed] <style> * { margin: 0; padding: 0; border-width: 1px; } .parentCls {margin:5px 60px 0;} .js-max-input {border: solid 1px ...
3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似...
3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似...
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绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
放大镜坐标改成截图尺寸. 傲游3.1.2.1000正式版重要更新: 英文拼写检查 英文拼写检查可以在你输入过程中提示可能有错误的英文单词, 用红色波浪线进行标注, 在标注上点击鼠标右键可以看到词库的拼写建议. 当然你也...