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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,864评论 1 11
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 7,263评论 0 4
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 3,933评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,532评论 2 10
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 5,049评论 0 6