【html】输入框里按了一下回车，页面就刷新了，怎么解决？

2023-12-18 17:49:19

【html】输入框里按了一下回车，页面就刷新了，怎么解决？

表现

form表单里放了个输入框，聚焦输入框后按了回车键，整个页面被刷新了。
在el-form有同样问题

原因

W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。
而触发了form的提交，就会导致页面刷新。

解决

阻止form表单的submit
可以在 el-form标签上添加 @submit.native.prevent;
或者在form标签上添加@submit.prevent

代码

使用element

<el-form @submit.native.prevent></el-form>

使用元html

<form @submit.prevent></form>

文章来源:https://blog.csdn.net/qq_41883423/article/details/135066769
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。