zoukankan      html  css  js  c++  java
  • [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());
        }
        
        
    });
  • 相关阅读:
    解决了Excel的一个貌似很奇怪的问题~~~
    关闭子页面,刷新父页面
    动态控制DataGrid中的TextBox的状态及输入值!!
    C#对Oracle BLOB字段的写入读取方法
    谈恋爱,好累...
    可移植,可扩展高效Proactor模式
    When are asynchronous file writes not asynchronous...
    [转]How to support 10,000 or more concurrent TCP connections
    [转]Creating a forwarding dll
    [转]非金钱激励员工的108种手段
  • 原文地址:https://www.cnblogs.com/wwwblender-3dcn/p/13602074.html
Copyright © 2011-2022 走看看