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());
        }
        
        
    });
  • 相关阅读:
    Bert whole mask为什么效果比mask字效果更好?
    开放领域关系抽取文献综述
    乱序语言模型XLNET的理解
    开源知识图谱介绍
    CRF条件随机场基础理解(一)
    Knowledge-Augmented Language Model and its Application to Unsupervised Named-Entity Recognition(Facebook AI 2019) 文献综述
    BERT+知识图谱: K-BERT Enabling Language Representation with Knowledge Graph 文献理解
    中文新词发现相关算法调研
    win10 + 独显 + Anaconda3 + tensorflow_gpu1.13 安装教程(跑bert模型)
    HTML页面仿iphone数字角标
  • 原文地址:https://www.cnblogs.com/wwwblender-3dcn/p/13602074.html
Copyright © 2011-2022 走看看