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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
