vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur

这篇具有很好参考价值的文章主要介绍了vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、@input(v-on:input)

此触发方法适合在查询条件或实时规则校验中使用。

<input type="text" placeholder="请输入查询内容条件" v-model="inputVal"  v-on:input="search" value="" />

2、@keyup.enter

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

3、@change

此触发方法和enter事件相似,在手机端都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同上input。
⚠️在iOS手机上可能出现的问题:
效果是输入值不用虚拟键盘触发方法就调查询接口进行数据查询,在安卓手机上没有问题,但iOS手机则回出现多次触发的情况。
解决办法:
通过使用watch对input的值进行监听,把需要绑定在input框的事件在监听到变动时进行调用。

4、@blur

失去焦点方法要满足输入框在输入完成、移到其他地方进行输入或操作是,触发该事件方法。使用该事件方法直接绑定验证发放即可。
⚠️如果使用mintui中的mt-field标签是,对应的blur(失焦)事件要执行时,要用@blur.native.capture=""来代替@blur。文章来源地址https://www.toymoban.com/news/detail-616413.html

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

到了这里,关于vue表单中输入框事件的使用@input、@keyup.enter、@change、@blur的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue自定义rules,对input表单输入框校验重复值

    对input表单输入框检验重复值,如对如下图参数名进行校验重复值  el-form-item添加属性:rules=\\\"rules.paramname\\\" 1.写一个rules 2.Method里面添加如下方法 rule:指的是表单中rules属性 value:指的表单输入框中输入的值 callback:回调函数(再次调用校验函数)

    2024年02月11日
    浏览(41)
  • Vue2 - 模板、渲染、事件处理、表单输入绑定

    本文内容来自:https://www.bilibili.com/video/BV1Rs4y127j8/ 1、文本 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值 一般配合 js 中的 data() 设置数据 2、原始 HTML 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令 3、

    2024年02月16日
    浏览(36)
  • VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入

    需求:输入超过规定长度error提醒,并实时显示输入长度,可无限输入 步骤: 我的项目中使用校验比较多,所以进行简单的封装: 新建js文件写入下面的函数 需要校验的组件引用使用: data中定义: form表单中prop要和rules中定义校验名一致: 看效果: 可以看到我们自定义n

    2024年02月16日
    浏览(41)
  • #vue#使用Element输入框,使用enter回车键搜索或提交

    如果整个表单只有一个输入框,按enter键实现搜索 同时进行监听有没有输入值,在methods里,写上监听的方法,当获取的v-model里的值,按下了回车键,如果需要监听空格或者其他键,换成别的键值 vue+elementUI在输入框中按回车键如果依旧会刷新页面;问题原因:当一个 form 元素

    2024年02月16日
    浏览(38)
  • Vue-给element-ui的input输入框绑定键盘事件不生效

    在vue中使用elementui的input组件绑定回车事件生效。 el-input @keyup.enter=\\\'方法\\\' /el-input 在vue中如果直接使用 v-on或@ 监听事件的话, 监听的是 由组件中使用$emit自定义的事件 , 例如下面代码。 使用 .native 修饰符, 告诉vue这是触发的 原生事件 不是 自定义事件 , 比如下面这个监听 ele

    2024年02月13日
    浏览(58)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(84)
  • jq——监听input组件type=“radio“单选框的change事件——基础积累

    jq的基操,但是由于本人jq操作dom不熟悉,用vue习惯了,所以还是要记录一下jq的基操,多多积累,多多收获。 1.html代码 2.css代码 3.js代码 完成!!! 多多积累,多多收获!!! 1. attr(): 作用:获取/设置元素的属性 //获取北京节点的name属性值 var bj = $(“#bj”).attr(“name”);

    2024年02月11日
    浏览(50)
  • js监听input输入事件及使用防抖封装函数处理的实现

    循序渐进: 1.实现input框的输入监听事件: 2.防抖函数 防抖函数的目的:为了限制函数的执行频率而出现,优化解决函数触发频率过高导致延迟及假死卡顿等bug的出现。大多用在查询和提交功能上。 设置时间内多次点击或者输入只会执行最后一次点击或者输入; 代码: 3.i

    2024年02月12日
    浏览(40)
  • uniapp中的input,输入input回车事件和输入input事件

    data定义 methods方法 实现效果--车辆信息点击搜索框实现,当输入值!==‘’--------实现搜索界面,点击键盘回车------------实现车辆信息界面 全部代码

    2024年02月11日
    浏览(38)
  • Vue3 的 回车(enter)事件

    在消息框中输入消息,回车发送消息

    2024年02月16日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包