经常使用的键盘事件的对比

我们在做项目时经常会用到的input标签来输入文本，又称之为文本框。我们经常会结合键盘事件来使用文本框，而我们常用到的的几种就是onkeydown事件、onkeyup事件、onkeypress事件、onchange事件还有onpropertychange事件。
现在先来看一下几种常用事件的效果示意图以及代码：
< input onkeyup="this.value=this.value.replace(/\D/g,'')" type="text" class="form-control">

< input < onkeydown="this.value=this.value.replace(/\D/g,'')" type="text" class="form-control" >

<input onkeypress="this.value=this.value.replace(/\D/g,'')" type="text" class="form-control" >

然后我们发现在使用这些常用的键盘事件过程中会有一些不完美的效果，我每次输入一个到文本框就会被替换，这个过程是可视化的。可是有时候我并不想要将我输入的中文显示出来，此时我们常用的几种键盘事件都无法达到这个效果。出现这样的清空我们就可以试试加强版的键盘事件，这个事件就是oninput事件。

this.value.replace(/\D/g,’’)：使用到的是正则表达式，正则翻译过来是除数字以外的字符都会被替换为空

<input type="text" class="form-control" oninput="input()" id="Sum">

布局代码：

< input type=“text” class=“form-control” οninput=“input()” id=“Money”>
Js代码：
var data = $("#Money").val().replace(/\D/g, ‘’);
$("#Money").val(data);

代码思路：
（1）获取到input标签里面的value值，然后定义一个变量来接收该value值
（2）再将这个变量赋值给input标签

使用oninput时间再和上面的正则表达式与js的结合

使用oninput时间再和上面的正则表达式与js的结合使用，现在不管我在键盘上敲多少的非数字字符他都不会显示出来，如果输入的是非数字字符，此时就会有种“只闻其声不见其人”的错觉，你只能听见键盘敲击声却看不见字符输入到文本框。

在使用效果之后得出总结：
Oninput事件：在按下键盘还没输入到文本框之前就已经被触发，通俗的讲：‘还未开始就已经结束了’
Onkeyup事件：在键盘弹起那一刻被触发，通俗的讲：‘一出现就被干掉’
Onkeydown事件：在键盘按下那一刻被触发，失去焦点后还会有一个‘残留物’，通俗的讲：‘一转身就清除’
Onkeypress事件：与onkeydown事件类似，都是在键盘按下那一刻被触发

最终的对比总结学习：
1、oninput事件与onpropertychange事件的区别：
oninput事件：和Onpropertychange事件相反，除了IE浏览器之外的大多数浏览器都可以使用。在value改变时触发，实时性，即每增加或删除一个字符就会触发，然而通过js改变value时，不会触发
区别：使用范围和属性触发时间不一致。共同点：都是实时触发。
总结：oninput事件，除IE浏览器之外，大多浏览器都可使用；Onpropertychange事件只能是IE浏览器使用。oninput事件只在value值改变时触发；Onpropertychange事件任何属性改变时触发

2、oninput事件与onpropertychange事件失效情况：
Oninput事件：（1）当脚本改变value值时，不会触发；（2）从浏览器的自动下拉提示中选取时，不会触发。
Onpropertychange事件：当input 被禁用(带有disable属性)时，不会触发

3、Onchange事件与onpropertychange事件的区别：
Onchange事件：在内容改变（两次内容有可能还是相等的），失去焦点时触发
Onpropertychange事件却是在实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是有局限性（只能IE浏览器使用）
区别：触发时间不一致。
总结：Onchange事件失去焦点时触发，Onpropertychange事件实时触发

4、onkeydown事件和onkeyup事件以及onkeypress事件的区别：
Onkeyup事件：当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
Onkeyd事件：当键盘或按钮被按下时，发生 keydown 事件
Onkeypress事件：当键盘或按钮被按下时，发生 keypress 事件，它发生在当前获得焦点的元素上。keypress 事件与 keydown 事件类似，不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
区别：触发时间的不一致，onkeypress事件与onkeydown类似，与onkeyup事件不同。

申明：部分转自https://blog.csdn.net/freshlover/article/details/39050609