表单中设置了 `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 ...
随机推荐
- Solon 1.7.6 发布，更现代感的应用开发框架
相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
- Web安全学习笔记 XSS上
Web安全学习笔记 XSS上 繁枝插云欣 --ICML8 XSS的分类和基本认识 XSS的危害 同源策略的基本认识 一.XSS的分类和基本认识 1. 简介 XSS全称为Cross Site Scrip ...
- hibernate + hsqldb单元测试
1.测试环境连接hsqldb,使用hibernate的自动建表功能. 1 <bean id="sessionFactory" 2 class="org.spring ...
- http缓存策略以及强缓存和协商缓存浅析
http缓存策略以及强缓存和协商缓存浅析 本地缓存-强缓存 本地缓存,也就是我们常说的强缓存:是指当浏览器请求资源时,如果请求服务端的资源命中了浏览器本地的缓存资源,那么浏览器就不会发送真正请求给服务 ...
- 566. Reshape the Matrix - LeetCode
Question 566. Reshape the Matrix Solution 题目大意:给一个二维数组,将这个二维数组转换为r行c列 思路:构造一个r行c列的二维数组,遍历给出二给数组nums, ...
- 基于C++11的数据库连接池实现
0.注意 该篇文章为了让大家尽快看到效果,代码放置比较靠前,看代码前务必看下第4部分的基础知识. 1.数据库连接池 1.1 是什么? 数据库连接池负责分配.管理和释放数据库连接,属于池化机制的一种,类 ...
- salesforce零基础学习（一百一十五）记一个有趣的bug
本篇参考:https://help.salesforce.com/s/articleView?language=en_US&type=1&id=000319486 page layou ...
- Java_Scanner的使用
目录 Scanner对象 scanner.next()和scanner.nextln()的区别 scanner.hasNext()和scanner.hasNextln() Scanner拓展 视频课程 ...
- 解决跨海高并发崩溃难题？so easy
近年来随着互联网强势的发展浪潮,越来越多的企业选择跨境出海,扩展海外市场.而想要在一个陌生市场最快速地吸引到用户,一定不能缺少的就是丰富多样的各类活动.然而活动在带来大流量的同时,也带来了一些问题,比 ...
- c++ 辗转相除（动图）
#include<iostream> #include<cstdio> #include<iomanip> #include<cstring> usin ...