input 元素 change 事件失效，失去焦点的时候才执行？什么原因导致？如何正确使用？

本文介绍: 按想来说当input 输入框里面的内容发生变化后，就会触发 c h ange事件啊，change事件不是在输入的时候触发吗？当按键抬起的时候触发的事件，在该事件触发之前一定触发了on key down事件–相当于一个按键，两个事件（on key down不常用）当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。的地方，刚刚按下的时候还没有写入内容，只有弹起的时候写入才完成，所以控制台总是比输入的内容要慢一拍（少一个）。那仅仅是大家的想当然，其实在。

具体问题如标题所示，不再过多水字数，请看下面的代码：

&lt;input :class="['custom-form-item-input', (isFocusUserName &amp;&amp; !userName) ? 'custom-form-item-input-err-active' : '']"
	autoComplete='new-password' 
	type="text" 
	placeholder='账号' 
	@change="onUseNameChage" /&gt;

控制台没有任何的输出

在这里插入图片描述

当失去焦点的时候，change事件被触发了，控制台显示输出内容

在这里插入图片描述

当遇到这种问题的时候，可以将 @change 替换成 @keyup 这样就能够正常触发了，请看效果：

在这里插入图片描述

那也有人可能会想到使用 @keydown 也行，那我能说不行吗？

在这里插入图片描述

请注意打红色箭头的地方，刚刚按下的时候还没有写入内容，只有弹起的时候写入才完成，所以控制台总是比输入的内容要慢一拍（少一个）。

那为什么@change失效了呢？

按想来说当input 输入框里面的内容发生变化后，就会触发change事件啊，change事件不是在输入的时候触发吗？为什么是在失焦的时候才触发？

那仅仅是大家的想当然，其实在官方是有这么一段描述的：

HTML 元素：change 事件
当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

文本输入元素
对于像 <input type="text"> 这样的元素，change 事件在控件失去焦点前都不会触发。

在这里插入图片描述

in put
当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 in put 事件。

在这里插入图片描述

那既然@change不生效问题找到了，那么 in put 元素在控制台实时输出解决方式就有了：

@keyup
@input

还需要注意一点的是@keyup和@input事件，所接收的参数是有区别的：

@keyup 需要通过event对象去取

const onUseNameChage = (e) => {
    const value = e.target.value;
    console.log('输入用户名:', value);
};

@input 直接输出输入项

const onUseNameChage = (value) => {
    console.log('输入用户名:', value);
};

最后再记录一下input其他的事件：

onfocus: 当input 获取到焦点时触发
onblur: 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。
onchange: 当input失去焦点并且它的val ue值发生变化时触发，个人感觉可以用于注册时的确认密码。
onkey down: 按下按键时的事件触发，
onkeyup: 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件（onkeydown不常用）
onclick: 主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件
onselect: 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
oninput: 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）

原文地址:https://blog.csdn.net/weixin_42728767/article/details/130346630

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_6135.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

input 事件触发

相关文章

发表回复 取消回复

发表回复取消回复