[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()); } });
posted on 2020-09-02 15:40 www.blender-3d.cn 阅读(499) 评论(0) 编辑 收藏 举报