[javascript][jQuery]如何同时绑定keyup(keypress,keydown) + blur事件

一般的情况下,如果同时绑定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://www.cnblogs.com/wwwblender-3dcn/p/13602074.html