事情是這樣 der ，有一天在做一個功能的時候發生一些靈異現象
我用 jQuery 綁定 onblur 事件的時候莫名其妙被觸發了兩次
我要做的功能是這樣：
當滑鼠游標移開(失焦 blur) textbox 時檢查輸入的資料是不是數字 or 小數
如果不是的話就跳出提醒 "請輸入數字"，然後 focus 在該欄位之後把值清空
這功能聽起來感覺很輕鬆簡單，就是檢查使用者輸入的是不是數字 (含小數) 而已
但搞超久的~
因為在綁定 onblur 事件的時候都會被觸發兩次，原因不明.....
網路上有找到解法，但好像不是用 on 來綁，是用一般的 blur (無法動態綁定)
因為我很多 dom 都是動態產生的，所以這個沒法用
如果想知道解法可以看這裡
http://stackoverflow.com/questions/6003826/jquery-...
就是以下，本來是這樣
$('#gradeUpdate').blur()
改成這樣就可以了
$('#gradeUpdate')[0].blur()
這個解決方法讓人不禁懷疑好像綁定了 blur 之後物件變成兩個了? (因為觸發兩次)
所以才要指定 [0] 使用第一個 $('#gradeUpdate')
然後因為我要使用 on 來做事件綁定，所以上面那個我不能用
但是 on 我又找不到解決方法，最後參考網路上的蠢方法來解決了
完整的 code 如下，已經加上註解來方便觀看:
//不知道為何 onblur 綁定後會觸發兩次，暫時先用蠢方法處理
//用個變數紀錄是第幾次blur
var secondBlur = false;
$(".tabdiv").on("blur", ".number", function () {
//已經blur過的話就直接滾出去!
if (secondBlur) return;
var obj = $(this);
var flag = obj.val() == "" ? true : /^[0-9]+(\.[0-9]{1,2})?$/.test(obj.val());
if (!flag) {
alert("請輸入數字!");
obj.val("").focus();
}
//第一次blur就押成true，下次就不會進來
secondBlur = true;
}).on("focus", ".number", function () {
//onfocus的時候重置
secondBlur = false;
}).on("paste", ".number", function () {
//用複製貼上的方式也要檢查是否為數字才行
var obj = $(this);
//因為沒有pasted 事件只有 onpaste，所以要抓貼上後的文字要用setTimeout等一下之後再抓
setTimeout(function () {
var flag = obj.val() == "" ? true : /^[0-9]+(\.[0-9]{1,2})?$/.test(obj.val());
if (!flag) {
alert("請輸入數字!");
obj.val("").focus();
}
}, 0);
});
參考資料：
http://stackoverflow.com/questions/9649966/chrome-...
http://stackoverflow.com/questions/6003826/jquery-...
全站熱搜
留言列表
CSS、Responsive Web Design (2)