• [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());
        }
        
        
    });
  • 相关阅读:
    Java 图片处理——如何生成高清晰度而占有磁盘小的缩略图
    【设计模式】状态模式
    【设计模式】策略模式
    【设计模式】迭代器模式
    【设计模式】观察者模式
    【设计模式】享元模式
    【设计模式】桥接模式
    【设计模式】组合模式
    【设计模式】外观模式
    【设计模式】代理模式
  • 原文地址:https://www.cnblogs.com/wwwblender-3dcn/p/13602074.html
Copyright © 2020-2023  润新知