1.如果你是在Element UI框架中使用<el-input>组件,并希望阻止回车键导致的页面刷新,你可以使用Vue的.prevent修饰符来阻止默认的表单提交行为。
<el-form @submit.native.prevent>
<el-form-item>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
在这个例子中,@submit.native.prevent会阻止表单的默认提交行为,从而阻止了按下回车键时的页面刷新。
解决:将 @submit.native.prevent注解添加到el-form标签上。
.native 表示对一个组件绑定系统原生事件
.prevent 表示阻止默认事件(如form的submit事件默认提交会刷新页面,.prevent修饰符可以阻止该默认事件)
分析原因:
当 el-form 表单内只有一个 el-input 输入框时,且type为text类型时,在输入框内按回车就会触发表单的提交事件。
<el-form>
<el-form-item>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
而当 el-form 表单内有多个 el-input 输入框时,按回车不会执行任何操作。
<el-form>
<el-form-item>
<el-input v-model="input1" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="input2" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
2.如果你希望在Element UI中阻止特定的<el-form-item>下的<el-input>组件在按下回车键时刷新页面,你可以在该<el-input>组件上添加一个@keydown.enter.prevent事件监听器。
注意:如果你发现@keydown.enter.prevent在Element UI的<el-input>组件中不起作用,那可能是因为<el-input>组件内部实际上是一个包装了原生<input>的组件,所以你需要使用.native修饰符来监听原生的keydown事件。
<el-form>
<el-form-item>
<el-input v-model="input1" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="input2" placeholder="请输入内容" @keydown.enter.native.prevent></el-input>
</el-form-item>
</el-form>
在这个例子中,@keydown.enter.native.prevent会阻止第二个<el-input>组件在按下回车键时的默认行为,从而阻止了页面刷新。注意,这只会影响第二个<el-input>组件,第一个<el-input>组件的行为不会受到影响。
3.@keyup.enter 和@keydown.enter键盘事件选择
- @keydown.enter:当用户按下回车键时触发。在按键被按下的那一刻就会触发,而不管是否已经松开。
- @keyup.enter:当用户松开回车键时触发。只有在按键被完全松开后才会触发。
在阻止表单提交的情况下,通常使用@keydown.enter更为有效。原因:因为浏览器通常在按键按下的时候就开始处理表单提交,而不是在按键松开的时候。所以,当你使用@keyup.enter.native.prevent时,浏览器可能已经开始提交表单,因此无法阻止表单的提交。
而当你使用@keydown.enter.native.prevent时,你是在按键被按下的那一刻阻止了默认的表单提交行为,所以它能够有效地阻止表单的提交。
这就是为什么@keydown.enter.native.prevent能够阻止表单的提交,而@keyup.enter.native.prevent不能。