表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面
场景
添加属性对话框中，input输入后点击 enter，不会执行绑定的 handleDialogQuery 事件，反而会刷新整个页面；
如果不点击 enter，点击搜索按钮，则是正常的。
又测试：在 属性组页面中，input 输入后点击 enter，是正常的，不会刷新整个页面。
解决办法：给 form 添加 @submit.native.prevent
原因
在一个 form 表单中，若只有一个 input，按回车键表单会自动提交，但是当表单中存在多个 input 时，按回车键不会执行任何操作，这是 form 表单的一个特性。
参考链接
表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面的更多相关文章
- keyup.enter.native&click.native.prevent
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyu ...
- vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:\ <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名, ...
- 在一个form表单中根据不同按钮实现多个action事件
<form id="writeForm" method="post"> <div class="write-btn-tj" ...
- 判断密码是否可见/判断登录的状态/判断在form表单中 定义rules规则验证(iview)
一: 判断密码是否可见判断:type="visiblePassword ? 'text' : 'password'" 是否为false 或者 true 密码为输入框或者文本框点击眼 ...
- 使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- 当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;
这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-inpu ...
- element-ui 的input组件 @keyup.enter事件的添加办法
<el-input placeholder="请输入密码" type="password" @keyup.enter.native="login ...
- ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案
期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...
- Vue element keyup.enter失效不起作用
解决方式一 添加按键修饰符@keyup.enter.native 解决方式二 把事件绑定到父元素(外框),需注意多个input问题 <div @keyup.enter="login&q ...
随机推荐
- 4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享
一.共享桌面原理 共享桌面在直播系统中是一个必备功能 共享者:每秒钟抓取多次屏幕,每次抓取的屏幕都与上一次抓取的屏幕做比较,取它们的差值,然后对差值进行压缩:如果是第一次抓屏或切幕的情况,即本次抓取的 ...
- Event Loop 是什么？
Event Loop 是什么? 本文写于 2020 年 12 月 6 日 广义上来说 Event Loop 并不是 JavaScript 独有的概念,他是一个计算机的通用概念. 狭义上来说,只有 No ...
- 【多线程】线程强制执行 join()
线程强制执行 join() Join合并线程,待此线程执行完成后,再执行其他线程,其他线程阻塞 : 可以想象成插队. 代码示例: /** * @Description 测试join方法 * @Auth ...
- 每天一个 HTTP 状态码 205
205 Reset Content 205 Reset Content 表示服务器成功地处理了客户端的请求,要求客户端重置它发送请求时的文档视图.这个响应码跟 204 No Content 类似,也不 ...
- dubbo是如何实现可扩展的？
dubbo如何实现可扩展的,援引官网描述: Dubbo 的扩展点加载从 JDK 标准的 SPI (Service Provider Interface) 扩展点发现机制加强而来. Dubbo 改进了 ...
- 面试官：Dubbo怎么实现服务降级，他有什么好处？
哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,今天周一了,招聘软件 ...
- 多态——JavaSE基础
多态 同一个方法可以根据对象的不同采取不同的动作 一个对象的实际类型是确定的,但可以指向对象的引用类型有很多 基本条件: 有继承关系 子类重写父类方法 父类引用指向子类对象Father f1 = ne ...
- 面试突击55：delete、drop、truncate有什么区别？
在 MySQL 中,删除的方法总共有 3 种:delete.truncate.drop,而三者的用法和使用场景又完全不同,接下来我们具体来看. 1.delete detele 可用于删除表的部分或所有 ...
- 从零开始实现lmax-Disruptor队列（二）多消费者、消费者组间消费依赖原理解析
MyDisruptor V2版本介绍 在v1版本的MyDisruptor实现单生产者.单消费者功能后.按照计划,v2版本的MyDisruptor需要支持多消费者和允许设置消费者组间的依赖关系. 由于该 ...
- AspNetCore&云效Flow持续集成
如今有了越来越多的持续集成工具,给的个人开发者的福利也是很足了,如无必要,自建工具有时只是作为练手了. 众多持续集成工具 现在可用的持续集成工具繁多,各大云服务商都推出了持续集成,甚至是一定条件内都是 ...