oninput和onchange在input框里触发函数的问题

本文介绍了如何在Vue框架中实现动态级联与模糊搜索功能。针对复杂的业务需求,作者探讨了利用input事件实时响应输入变化的方法,以实现即时反馈的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    一天改两次bug,每次都有新感觉,今天的问题就是,在input框里实现模糊搜索。由于需求比较复杂,需要动态的做级联和模糊搜索,(本人使用的是vue框架),查阅了网上的资料,在vue中实现模糊搜所时,都是把过滤写在computed中,因为vue中computed在监测到属性变化时就会自动的执行相应的代码,并且还提供了加缓存的方式,是之前对数据的操作一直存在于缓存之中,但是,由于我的实现模糊搜索的数据是一个数组,而computed在官方文档上表示为计算属性,不允许传值,所以就被悲剧了。。。于是我就想在input框中加一个监听事件,当检测到输入变化时,就执行摸个函数,于是,,可坑就来了。。。

    oninput和onchange是原生js里的方法,二者用在input中都可以实现文本框里的内容改变,执行相应的代码,但是二者的区别是触发的时间不一样,onchange触发的时间shi

当前对象属性改变,并且是由键盘或鼠标事件激发的,如果得用JavaScript改变触发对象的属性时, 并不能触发onchange事件,在当前对象失去焦点之后,触发onchange事件,

而oninput事件则是只在对象value值发生改变时奏效

    所以说,当你想实现文本框边输入边触发函数实现模糊搜索时,oninput可以达到你的要求。在vue中,这样使用oninput:

    

 <input type="text" v-model='search' @input = "hello()"/>


<h3>回答1:</h3><br/>onchangeoninput是事件监听函数的不同类型。onchange监听的是元素值(input、select、textarea等)的改变并提交前的事件,而oninput监听的是元素值的实时改变事件,即每当用户输入一个字符都会触发oninput事件。 <h3>回答2:</h3><br/>onchange oninput 是两种常见的 JavaScript 事件类型,它们都能够监听到表单元素的值发生变化的时候触发事件。但是,它们之间还是有很多区别的。 onchange 是在元素的值发生改变并且失去焦点的时候触发事件。也就是说,当用户在输入中输入了一些内容,然后点击别的地方或者按下 Tab 键切换焦点时,onchange 事件才会被触发。如果用户在输入中输入内容后直接点击提交按钮,那么 onchange 事件不会被触发。而且,如果使用 JavaScript 修改表单元素的值,也不会触发 onchange 事件。 oninput 事件则不同,它在用户输入的时候就会触发事件,每当表单元素的值发生改变就会触发一次。也就是说,只要用户输入了任何一个字符,oninput 事件就会被触发。如果使用 JavaScript 修改表单元素的值,oninput 事件也会被触发。 因此,从上面的解释可以看出:onchange 适用于需要用户在输入完成之后再进行处理的情况,而 oninput 更加实时,适用于一些需要及时反馈的场景,例如实时搜索、即时更新等等。 在实际的开发中,我们需要根据具体的需求来选择使用 onchange 还是 oninput 事件,以便更好地满足用户需求。 <h3>回答3:</h3><br/>onchangeoninput是JavaScript中两个常见的事件处理器。它们在用户输入文本的时候都会被触发,但是它们有不同的特点用法。 首先,onchange事件处理器是在输入元素(如文本或下拉菜单)中的值发生变化并且失去焦点时触发的。换句话说,当用户在输入元素中改变其值,并将焦点从该元素移开时,它才会被触发。因此,onchange事件处理器通常用于捕获元素的值的最终版本,即在用户更改之后。 相反,oninput事件处理器是在输入元素中的值发生任何变化时都会被触发的。每一次键盘按下、复制、粘贴、删除都会触发该事件。因此,oninput事件处理器通常用于捕获用户正在输入的内容,并在其输入的时候进行实时响应。 此外,onchange事件处理器一般只适用于像下拉菜单这样的输入元素,因为这些元素存在一个明确的选项列表,而且只有在用户准备好提交其选择时才会触发。而oninput事件处理器适用于文本等自由文字输入元素,因为用户可以在任何时候输入或更改他们的值。 在总体上,onchangeoninput事件处理器都是用于捕获用户输入行为的工具。只要开发人员了解它们如何工作何时使用,就可以使用它们来满足不同的需求优化用户体验。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值