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

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

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

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

一、change事件瀏覽器

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

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

二、keydown、keypress、keyup事件this

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

使用方法
.net

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事件不會觸發
firefox

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

相關文章
相關標籤/搜索