前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

作者头像
全栈程序员站长
发布2022-08-12 15:24:01
8.3K0
发布2022-08-12 15:24:01
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

一、@input(或者是v-on:input)

使用:

代码语言:javascript
复制
<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal"  v-on:input="search" value="" />

适用于实时查询,每输入一个字符都会触发该事件。如图:

在这里插入图片描述
在这里插入图片描述

二、@keyup.enter

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

三、@change

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

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

四、@blur(失焦)

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

代码语言:javascript
复制
<mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username" @blur.native.capture="testUser"></mt-field>

注:在elementUI中输入框el-input内,直接使用@click事件无效,此时,需要加上修饰符.native,即:@click.native。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131638.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月3,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、@input(或者是v-on:input)
  • 二、@keyup.enter
  • 三、@change
  • 四、@blur(失焦)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档