最近做項目,出現一個需求,為了給用戶帶來更好的體驗,在檢查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