vue input输入框事件

一、@input（或者是v-on:input）

每输入一个字符都会触发该事件，用于实时查询。

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal"  @input="search" value="" />

二、@keyup.enter

该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，
@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal"  @keyup.enter="search" value="" />

若是element组件封装的，加.native
因为：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件

<el-input  v-model="filterText"  placeholder="输入关键字进行过滤" @keyup.enter.native="search"/>

三、@change

该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

注：在ios手机上会出现问题:
如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询，这时在安卓手机上没有问题，但是在ios手机上会出现多次触发的情况。
简单的解决办法：
对input的值进行监听（watch），把原本需要绑在input框的事件在监听变化时调用

四、@blur（失焦）

要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。
注：如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=""来代替@blur。

<mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username" @blur.native.capture="testUser"></mt-field>

五、@focus（得到焦点事件）

input框得到焦点后触发事件，初始状态

转自：https://blog.csdn.net/zuoyiran520081/article/details/86611608