表单输入事件辨析-oninput、onkeyup、onchange 开发须知！

oninput事件:是在用户输入时触发；该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
onkeyup事件：在键盘按键被松开时发生。即键盘弹起时触发。
onchange事件：输入完毕后，失去焦点时触发。可用于 <input> 、 <textarea> 、<select><select/>。
注：事件触发顺序是：oninput - onkeyup - onchange（失去焦点）
提示：与onkeyup 事件相关的事件发生次序：onkeydown-onkeypress-onkeyup
（附：onkeypress 事件会在键盘按键被按下并释放一个键时发生。）

一、 oninput事件与onchange事件对比：

该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
input表单：

<input type="text" name="">

script代码：

var inp=document.getElementsByTagName("input")[0];inp.onchange=change;inp.oninput=inpu;//边输入边触发函数inp.onkeyup=key;// 也可以用事件监听的方式，这里只写一个为例// inp.addEventListener("change",change)function change(){console.log(inp.value+"-change");}function inpu(){console.log(inp.value+"-input");}function key(){console.log(inp.value+"-keyup");}

比如输入“你”，运行结果：

上图输入n i 比较连续，与输入的快慢也有关系，慢速输入n i 结果是这样的：

二、select下拉列表适用onchange（）

当值发生改变时触发，选择的值需要与上一次不同。相同时不会触发onchange事件。
这里扩展一下，如果开发时与数据库等相关联，一定要设置好select中option的value值。

欢迎大家补充，下方留言~

表单输入事件辨析-oninput、onkeyup、onchange 开发须知！相关推荐

vue监控表单输入事件，正则验证手机号，邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...
uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云
# 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...
【Vue教程三】点击事件、表单输入事件、键盘事件
一.点击事件: 1.可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 'v-on:click' 简写成 '@click' <body><di ...
JavaScript基础（九）form表单、事件、3D
form表单.事件.3D form表单 form表单操作 event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡 javascript实现 jQuery实现 3D 3 ...
React 表单与事件
一个简单的实例在实例中我们设置了输入框 input 值value = {this.state.data}.在输入框值发生变化时我们可以更新 state.我们可以使用 onChange 事件来监听 i ...
Vue表单输入绑定(元婴中期)
表单输入绑定基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自 ...
js检测、控制表单输入必须为中文
js检测.控制表单输入必须为中文 <html> <head> <meta http-equiv="content-Type" content=&quo ...
Vue007_ 表单输入绑定
表单输入绑定使用 v-model 对表单数据自动收集 1) text/textarea 2) checkbox 3) radio 4) select <!DOCTYPE html> & ...
java GUI怎么输入_在Swing中创建Java GUI以进行表单输入
好吧,我已经浏览了整个互联网,但却未能找到这个问题的答案,所以也许有人可以提供一些见解. 我正在开发一个相对简单的Java应用程序,它将取代目前用于系统访问请求的Word文档.它旨在允许表单输入新的员 ...

表单输入事件辨析-oninput、onkeyup、onchange 开发须知！

一、 oninput事件与onchange事件对比：

二、select下拉列表适用onchange（）

表单输入事件辨析-oninput、onkeyup、onchange 开发须知！相关推荐

最新文章

热门文章