表单中设置了 `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 ...
随机推荐
- 深入HTTP请求流程
1.HTTP协议介绍 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,它是从WEB服务器传输超文本标记语言(HTML)到 ...
- Git 上传文件项目到github,gitee详细教程！(本文用的gitee)
1:安装Git 下载地址:https://git-scm.com/ 2:生成ssh密钥不会的可以去另一篇文章 https://www.cnblogs.com/psfjc/p/15980893.html ...
- 网络：Tor
洋葱路由催生了暗网的产生 1995年,美国海军研究实验室的科学家开始开发一套匿名系统,可以避免人们在互联网上的行迹被追 踪到.由于在该系统中,数据被层层密码保护,这个技术被称为叫作"洋葱路由 ...
- Servlet表单数据
1.GET 方法 GET 方法向页面请求发送已编码的用户信息.页面和已编码的信息中间用 ? 字符分隔,如下所示: http://www.test.com/hello?key1=value1&k ...
- 联盟链 Hyperledger Fabric 应用场景
一.说明 本文主要通过一个例子分享以 Hyperledger Fabric 为代表的联盟链应用场景. 关于 Fabric 的相关概念请先参考文章 <Hyperledger Fabric 核心概念 ...
- Vue2-组件通讯传值
Vue2组件通讯传值 方法 Slot插槽--父向子内容分发,子组件只读 mixin混入--定义公共变量或方法,mixin数据不共享,组件中mixin实例互不影响 provide+inject--依赖注 ...
- 「JOISC 2019 Day4」蛋糕拼接 3
loj 3039 NKOJ Description \(n\)个蛋糕,每个蛋糕有\(w_i,h_i\).选\(m\)个蛋糕满足\(\sum\limits_{j=1}^mw_{k_j}-\sum\lim ...
- AcWing 1248. 灵能传输 蓝桥杯
蓝桥杯的一道题:灵能传输 https://www.acwing.com/problem/content/description/1250/ 首先是简化操作,将原数组转化为前缀和数组(下标都是从1开始) ...
- Java实用类(五) -Math类和指定范围的随机数
1.Math类 java.lang.Math类提供了常用的数学运算方法和两个静态常量E(自然对数的底数) 和PI(圆周率) // 绝对值 System.out.println(Math.abs(-3. ...
- SAP 维护视图隐藏字段
PBO: MODULE reset_index. 其中ZDT_BPC002_T02 为视图名称. MODULE reset_index OUTPUT. FIELD-SYMBOLS:<fs ...