通过正则实时监听检查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