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

最近作項目，出現一個需求，爲了給用戶帶來更好的體驗，在檢查input輸入值的格式時要作到即時反應，每輸入一個字符都要當即檢查，若是不符合格式就不能輸入

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

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

一、change事件

這個方法能夠監聽到input輸入內容，不過不是實時監聽，只有input失去焦點且文本框內容發生改變纔會觸發，而且能夠用在非輸入框中，如：select等。使用方法：

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

二、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()); }); 

2、實現了實時監聽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