作者TonyQ (沉默是金)
看板Ajax
標題[心得]jQuery blur事件擴充
時間Thu Sep 18 15:07:19 2008
blur基本上是失焦
也就是 原本a物品是focus的狀態 , 接著任意b物品變成focus()
a被移除focus狀態時 , 就會呼叫blur.
但是這個event我反覆測來測去 ,
只有input跟select還有textarea是會有blur行為.
理由是只有這些元素 , 是點擊時會觸發 focus().
舉例 ,像 div 就沒有 focus的狀態.
但這樣就會造成我們實做一些自訂元件的困擾 ,
比方說想拿 div 模擬 select 項目 .
（理由可能是外框跟選項內容可以有更大的彈性.）
──────────────────────────────────
我簡單寫了一個 eBlur() (e只是為了跟原本的blur作區隔)
以 click / focus 兩個事件偽裝成focus 的狀態 ,
而以body被click跟使用者按下tab鍵當作是 blur() 的進入點.
節錄code如後, 當然 , 這東西是不能透過bind綁定的 . :p
──────────────────────────────────
function _blur(e){
jq("[eBlur=1]").blur();
}
$(document).click(_blur).keyup(
function(e){
if(e.keyCode==9){
_blur();
}
}
);
$.pBlur=function(elem,fn){
if($.isFunction(fn)){
var jqThis=$(elem);
jqThis.bind("blur.pb",fn);
/*原本就支援fn的不作*/
if(!jqThis.is(":input,select,textarea")){
var cb=function(){
jqThis.attr("eBlur","1");
};
$(elem).bind("focus.pb",cb).bind("click.pb",cb);
}
}else{
$(elem).blur();
}
}
$.fn.pBlur=function(fn){
$(this).each(function(){$.pBlur(this,fn);});
return $(this);
};
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.128.219.202
※ 編輯: TonyQ 來自: 220.128.219.202 (09/18 15:08)
※ 編輯: TonyQ 來自: 220.128.219.202 (09/18 15:09)
→ TonyQ:好像還差個unbind :p ..需要unbind blur,focus,click事件. 09/18 15:16
※ 編輯: TonyQ 來自: 220.128.219.202 (09/18 15:24)
※ 編輯: TonyQ 來自: 220.128.219.202 (09/18 15:50)
→ TonyQ:啊啊 , 果然還是有bug... :p 09/18 17:56
→ contagious:我會選擇用一個隱藏的 input ，做為 event 的 proxy 09/19 02:59
→ TonyQ:你說的 , 我有考慮過這件事情 , 事實上那是一開始的實作. 09/19 03:23
→ TonyQ:input 不能是display:none 或是 invisible . :p 09/19 03:23
→ TonyQ:然後 , 另一麻煩就是因為要觸發事件 , 所以要把所有對應的原 09/19 03:24
→ TonyQ:素都紀錄起來.(在這個例子我是借助自訂屬性eBlur幫忙) :p 09/19 03:25
→ TonyQ:input 我那時候是採用absolute + left:-100%達到隱藏 09/19 03:26
→ TonyQ:如果用跑出畫面外的方式隱藏的 input , 就不需要對document 09/19 03:29
→ TonyQ:listen click跟keyDown囉 , 變成透過input去blur. 09/19 03:29
→ TonyQ:不過今天沒什麼時間想這件事情 如果有人有同樣需求 , 再來 09/19 03:30
→ TonyQ:補完吧 .我今天是寫到 bind , unbind , blur, focus而已.:p 09/19 03:30