kevinya

一般的情況下，如果同時綁定keyup以及blur事件的話，會導致觸發的事件錯亂，每次keyup同時也會觸發blur事件
下面的示範就會介紹如何同時綁定keyup以及blur事件，並且不造成事件的錯亂

//這是一個需要keyup以及blur事件驗證的textbox
//keyup按下鍵盤的時候，需限定textbox內容符合正規運算式
//等到textbox內容符合最後輸出的格式的時候，使用者會繼續
//去輸入別的input，這時候就要觸發blur事件，去進行一些其他的檢核
var txtToBeChecked = $("#yourTxt");
//如果要防止user按下enter, 需額外綁定keypress事件
//在keyup事件才去防止enter太晚囉~
txtToBeChecked.unbind('keypress'); 
txtToBeChecked.on('keypress', function () {
	var code = event.key;
	if (code === "Enter") {
		event.preventDefault();
		return false;
	}
});
txtToBeChecked.unbind('keyup');                                
txtToBeChecked.on('keyup', function (event) {
	
	var value = $(this).val();
	var stringLength = value.length;
	
	//隨著使用者不斷的keyup
	//輸入的txt內容都需要符合正規運算式的規定
	var regex1 = /^[rR]$/;
	var regex2 = /^[rR]{1}\d+$/;
	var regex3 = /^[rR]{1}\d+[cC]$/;
	var regex4 = /^[rR]{1}\d+[cC]{1}\d+$/;//regex4是使用者輸入的最後應該符合的格式R1C1
	
	var result = false;
	//當符合最後的格式的時候，綁定blur事件
	//blur事件就可以進行其他的檢核或是javascript的行為
	if (regex4.test(value) == true) {
		result = true;
		txtToBeChecked.unbind('blur');           
		txtToBeChecked.on('blur', function () {
			alert('trigger blur event')
		});
	}
	else if (regex3.test(value) == true) {
		txtToBeChecked.unbind('blur');           
		result = true;
	}
	else if (regex2.test(value) == true) {
		txtToBeChecked.unbind('blur');      
		result = true;
	}
	else if (regex1.test(value) == true) {
		txtToBeChecked.unbind('blur');      
		result = true;
	}
	else {
		//do nothing
	}
	
	
	//keyup事件若是不符合正規運算式的規定，就取消使用者剛才的輸入
	if (result == false) {
		$(this).val(value.substr(0,stringLength - 1));
	}
	else
	{
		//若是keyup事件符合正規運算式的規定，就把英文轉大寫
		$(this).val(value.toUpperCase());
	}
	
	
});

參考資料:
https://stackoverflow.com/questions/21387524/jquery-textbox-validation-using-both-on-keyup-and-blur