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框获取焦点时所触发的事件,初始状态
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)