使用vue+iview Form组件按enter键阻止页面刷新

如果我们在Form组件中嵌套使用Input组件的时候，会有一个小问题，如果我们在一个Form组件中只使用了一个Input组件，当该Input组件获取焦点的时候，我们按enter键，整个页面会刷新

解决办法：

方法一、
<Form ref="formInline" :model="jigouInfo"  inline :label-width="80" @keydown.native.enter.prevent ="searchHandle"></Form>方法二、//也可以直接在Input组件上阻止刷新，记得要用keydown事件，不要用keyup事件哦，亲测keyup事件不起作用
<Form ref="formInline" :model="jigouInfo"  inline :label-width="80"><FormItem label="出版机构名称" :label-width="120"><Input v-model="jigouInfo.jigou_name" placeholder="" @keydown.enter.native.prevent="searchHandle"></Input></FormItem>
</Form>

如果想要实现按enter键检索的功能，那就采用方法二，如果只是为了阻止页面刷新的问题，就采用方法一即可

并且，经本人亲测，当一个Form组件中有多个Input组件的时候，即便我们不采取任何措施，按enter键的时候也不会出现页面刷新的问题

知识学习：

键盘事件主要有2个：

onkeydown : 键盘按下时触发,如果按下不抬起，那么会连续触发。

onkeyup : 键盘弹起时触发

不是所有元素都能接收键盘事件，只有能够响应用户输入的元素，换言之，能够接收焦点的元素就能接收键盘事件。

使用vue+iview Form组件按enter键阻止页面刷新相关推荐

按下enter键禁止页面刷新
这里讲解一下,PC端,前端可以遇到的一个问题,就是按下enter键禁止页面刷新. 这里有一个例子: 这个是我开发的一个项目.在这里面,我们在右上角搜索里面输入图片名字,按下搜索按钮就会检索出对应的图片 ...
VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...
vue 绑定 keyup.enter 绑定回车键盘事件 enter键防止页面刷新
为祖国的复兴而读书!!! 一般方法,这样写: <div class="btn submit" @keyup.enter="submit" @click=& ...
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键
Vue el-input 使用@keyup绑定Enter键.上下左右键.删除键 <el-inputv-model="order"@keyup.enter.native=&qu ...
vue在按钮上绑定enter键
在登录按钮中绑定上enter键话不多说,直接上代码吧~ <el-button type="primary" @click="submitForm('loginFo ...
Vue进阶（壹佰）：当前页面刷新并重载页面数据
文章目录一.前言二.业务场景三.实现原理四.应用代码五.拓展阅读一.前言在开发Vue项目过程中,遇到页面样式混乱情形.后发现可通过刷新页面解决该问题,经过问题探究,发现使用最简单的页面刷 ...
Vue iview时间组件DatePicker，设置开始时间和结束时间约束
html模板代码: <FormItem label=""><Row><Col span="11"><DatePicke ...
vue uni-app 公共组件封装，防止每个页面重复导入
1.公共插件实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this;this.api.userInfo({token: ''}#通用 ...
点击form 表单中的button导致页面刷新问题
2019独角兽企业重金招聘Python工程师标准>>> 做点击按钮切换背景样式与内容的时候每次都刷新页面 ,发现button写在了form 标签当中 <form>< ...

使用vue+iview Form组件按enter键阻止页面刷新

使用vue+iview Form组件按enter键阻止页面刷新相关推荐

最新文章

热门文章

使用vue+iview Form组件 按enter键阻止页面刷新

使用vue+iview Form组件 按enter键阻止页面刷新相关推荐

最新文章

热门文章

使用vue+iview Form组件按enter键阻止页面刷新

使用vue+iview Form组件按enter键阻止页面刷新相关推荐