input 的 oninput onkeypress onkeydown onchange 事件的区别

事件执行顺序:

<input type="text" id="foo"
onkeydown="console.log('down')"
onkeypress="console.log('press')"
oninput="console.log('input')"
onkeyup="console.log('up')" >

以上打印顺序为 ' down press input up', 故对应的事件触发顺序为 onkeydown > onkeypress > oninput > onkeyup

oninput vs onchange:
oninput 是input内内容改变时触发, onchange则在内容改变并且input失焦后触发
https://www.w3schools.com/jsref/event_oninput.asp

onkeypress vs onkeydown:
onkeypress 事件触发不包括ctrl, backspace等功能键, 即 ctrl+c等按键不触发 onkeypress 但会触发 onkeydown, 因为onkeydown事件触发包括所有按键

oninput vs onkeypress/onkeydown:
oninput 是input内内容更新变化时触发, onkeypress则在按下按键后触发(此时 input 内文本还没更新):

<!-- 以字母大写效果触发为例可看出两者区别 -->
INPUT <input id="testInput" oninput="this.value=this.value.toUpperCase()" /> <br/>
KEYPRESS <input id="testKeyPress" onkeypress="this.value=this.value.toUpperCase()" />

以上测试代码线上地址: https://jsfiddle.net/skura23/atn1uepm/

转载于:https://www.cnblogs.com/skura23/p/10147837.html

input 的 oninput onkeypress onkeydown onchange 事件的区别相关推荐

【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...
oninput事件onpropertychange事件onchange事件textIput事件
oninput事件&onpropertychange事件&onchange事件&textIput事件 oninput事件简介 input,select,textarea元素值 ...
JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结
1.事件的简单介绍按键相关的: onkeydown 当用户按下键盘按键时触发. onkeyup 当用户释放键盘按键时触发. onkeypress 当键盘按键被按下并释放一个键时发生. 其他: o ...
onchange onpropertychange 和oninput事件的区别
汇总onchange onpropertychange 和oninput事件的区别: 1.onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容 ...
onchange onpropertychange 和 oninput 事件的区别
汇总 onchange onpropertychange 和 oninput 事件的区别 1.onchange 事件与 onpropertychange 事件的区别: onchange 事件在内容改变 ...
onchange事件和input事件
本文转载处:https://www.cnblogs.com/xuzhudong/p/8630610.html 1., input输入框的onchange事件,要在 input 失去焦点的时候才会触发: ...
input的onchange事件实际触发条件与解决方法
input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...

input 的 oninput onkeypress onkeydown onchange 事件的区别

input 的 oninput onkeypress onkeydown onchange 事件的区别相关推荐

最新文章

热门文章