JS 文本输入框放大镜效果
今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看 kissy demo
其实这种效果 对于很多童鞋来说 应该并不陌生！我今年最早也是在 12306官网抢票 中 添加联系人 要填写电话号码中看到这种效果！如下图所示：
所以今天下午也就研究下这个，特此分享出来给大家！也做了一个简单的DEMO jSFiddle链接地址如下：
JSFiddle链接：
基本原理：
其实基本原理也很简单！通过JS不断的监听输入框值的变化(通过jquery中的keyup事件)，有值的话 把内容值赋值给那显示div上去。
配置参数如下：
组件不足之处:
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
