本文Demo:https://www.lyz810.com/demo/inputKeyEvent/
下载对比表格:https://www.lyz810.com/demo/inputKeyEvent/inputEventCompare.xlsx
说明:本文中只考虑IE9~IE11以及Chrome和Firefox浏览器,文中的其他浏览器均指代上述范围内的浏览器。
一、oninput和onpropertychange
oninput是HTML5中针对input、textarea及select新增的事件,在IE9以上以及其他浏览器中可以使用。
老板本的IE(IE10及更早版本)中,支持使用onpropertychange事件来实时监听用户输入。
注意:onpropertychange事件会在input的任意一个属性变化时回调,所以使用时应判断哪个属性发生了变化。
二、IE中oninput的坑
在IE10以上的版本中(支持placeholder的IE),如果设置了placeholder,那么在input获取焦点时,如果原始值为空,则会触发oninput事件,因为IE的placeholder会在获取焦点时清空,而Chrome和Firefox不会(在输入第一个字符后,placeholder内容才会消失)。
同理,删除最后一个字符也会触发oninput(但这个是正常情况,毕竟input的值已经发生了改变)。
三、键盘事件触发顺序表
onkeydown | onkeypress | oninput | onkeyup | onchange | onblur | onpropertychange | |
IE9 | 1 | 2 | 3 | 5 | 6 | 7 | 4 |
IE10 | 1 | 2 | 4 | 5 | 6 | 7 | 3 |
IE11 | 1 | 2 | 3 | 4 | 5 | 6 | – |
Chrome | 1 | 2 | 3 | 4 | 5 | 6 | – |
Firefox | 1 | 2 | 3 | 4 | 5 | 6 | – |
总体看来,基本上都是down→press→input→up,但IE9和IE10的onpropertychange触发顺序是相反的,IE9会先触发oninput然后才是onpropertychange,IE10则是先触发onpropertychange,然后再触发oninput。
四、特殊按键触发表
onkeydown | onkeypress | onkeyup | oninput | onpropertychange | |
IE9 | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | ESC、ENTER | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | – | – |
IE10 | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | ESC、ENTER | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | DELETE、BACKSPACE | DELETE、BACKSPACE |
IE11 | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | ESC、ENTER | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | DELETE、BACKSPACE | – |
Chrome | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | ENTER | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | DELETE、BACKSPACE | – |
Firefox | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | ESC、ENTER、DELETE、BACKSPACE | ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER | DELETE、BACKSPACE | – |
测试了ESC、SHIFT、CTRL、ALT、DELETE、BACKSPACE、ENTER按键,它们都可以触发onkeydown和onkeyup事件。
除IE9外,其他浏览器在两种删除按键下都可以触发oninput事件,IE10还可以触发onpropertychange事件(IE9都不能触发,要想监控到删除字符需要使用keydown)。
而onpress事件触发规则更是五花八门,IE下只有ESC和ENTER可以触发,Chrome只有ENTER能够触发,Firefox在ESC、ENTER、DELETE、BACKSPACE下都可以触发onpress事件。
五、剪切粘贴触发规则表
oninput | onpropertychange | |
IE9 | 粘贴 | 粘贴 |
IE10 | √ | √ |
IE11 | √ | – |
Chrome | √ | – |
Firefox | √ | – |
这里IE9仍保持着它的怪异风格,只有粘贴时会触发oninput和onpropertychange事件,剪切时并不会。
IE10和IE11以及其他浏览器剪切粘贴都可以触发oninput事件,而IE10还会触发onpropertychange事件。
六、总结
IE9认为输入框中的内容减少不触发oninput和onpropertychange事件,如删除和剪切,只有增加内容才会触发。
其他浏览器会在文本框内容改变时触发oninput事件。
IE的placeholder会导致初始文本框无内容时,获取焦点即触发oninput事件。
oninput和onpropertychange(IE专有)事件会同时触发,只是不同浏览器中触发顺序不同。
浏览器都是按照down→press→input→up的顺序触发,某些按键不触发其中的几个事件。
在press事件之前,按下的字符不会显示在文本框内,所以要禁止输入一些字符可以在onkeydown或onkeypress事件中阻止默认行为(建议在keydown中,因为keypress的触发规则不同,需要做一些兼容性处理)。
印屏幕键(print screen)只触发keyup不触发keydown。
Fn键不触发任何事件
onchange事件都是在onblur前触发(只有最终内容与focus是不同才会触发)。