通過正則實時監聽檢查input輸入,實時反應,不符合不能輸入的功能詳解


最近做項目,出現一個需求,為了給用戶帶來更好的體驗,在檢查input輸入值的格式時要做到即時反應,每輸入一個字符都要立即檢查,如果不符合格式就不能輸入

實現這個需求,首先要做到實時監聽input輸入值,才能對其進行字符串檢查。

一、實現實時監聽input輸入值的方法有三個途徑

1、change事件

這個方法可以監聽到input輸入內容,不過不是實時監聽,只有input失去焦點且文本框內容發生改變才會觸發,並且可以用在非輸入框中,如:select等。使用方法:

obj.onchange=function(){
  consolo.log(obj.value);
}

2、keydown、keypress、keyup事件

這是三個都是鍵盤事件,不過這三個事件還是有一些不同
(1).當按一下任意鍵,會觸發onkeydown事件,如果不松開,將一直觸發。
(2).當按一下字符鍵(比如abcd1234這些)會觸發onkeypress事件,如果不松開,將一直觸發這個事件。
(3).當釋放鍵盤上的鍵,才觸發onkeyup事件。
(4).按下一個鍵盤上的字符鍵,三種事件的觸發順序keydown -> keypress -> keyup
(5).按下esc鍵,在firefox瀏覽器以及ie瀏覽器會觸發keypress事件,在chrome瀏覽器和Opera瀏覽器不會觸發keypress(js高級程序設計第三版P379頁的說法並不精確)

使用方法

obj.onkeypress=function(){
    console.log(obj.value);
};
obj.onkeydown=function(){
    console.log(obj.value);
};
obj.onkeyup=function(){
    console.log(obj.value);
}

實際檢測時會發現,keydown事件以及keypress事件會存在延遲,每次獲取的輸入值,都是之前的,總是慢半拍,原因是keydown與keypress總是在新值發生改變之前觸發。
最后發現只有keyup符合要求,不過keyup也不是完美的,缺點就是當你復制粘貼值進去的時候,或者瀏覽器自動記住的值輸入進去的時候,keyup事件不會觸發

3.input事件

 

input事件就可以完美解決這個問題,oninput是在值改變時立即觸發,不過他也有小缺點,那就是兼容性問題,它不支持ie9以下的瀏覽器,不過還好,我們有一個ie專屬的事件propertychange()

這時候,我們就可以采用最佳解決方案:HTML5標准事件oninput和IE專屬的事件properchange

propertychange 和 input 事件:

1)propertychange只要當前對象的屬性發生改變就會觸發該事件,功能同oninput,用以替代oninput在IE9以下的不兼容性。

2)input是標准的瀏覽器事件,一般應用於input元素,當input的value發生變化就會觸發該事件,無論是鍵盤輸入還是鼠標黏貼的改變都能及時監聽到變化

實現代碼如下,這里bind同時綁定了input和propertychange兩個方法:

$('#username').bind('input propertychange', function() {  
    console.log($(this).val());
});  

二、實現了實時監聽input輸入值,下一步就是驗證格式,實時進行處理

這里選擇用正則表達式和replace()方法去實現,正則表達式可以根據具體需求去寫,這里用只限輸入數字的例子,實現代碼如下:

$('#username').bind('input propertychange', function() {  
    console.log($(this).val());
    $(this)[0].value = $(this).val().replace(/[^0-9]/g,'')
});

至此,完美實現需求,這種交互體驗還是很好的,不用每次提交的時候再去給用戶彈窗提示格式不正確。
---------------------
參照文章
原文:https://blog.csdn.net/qq_31881193/article/details/78978167
原文:https://www.cnblogs.com/LHYwin/p/6136256.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM