使用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 : 键盘弹起时触发

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