如果我们在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 : 键盘弹起时触发
不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换言之,能够接收焦点的元素就能接收键盘事件。