事情是這樣 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-...


創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()