el-form表单回车提交，浏览器会刷新页面

由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。 解决方法1： 加一个隐藏的文本框，即表单不只有一个文本框 <el-form-item style="margin-bottom:0;display:none;"> <el-input></el-input> </el-form-item> 解决方法2： 阻止form的enter(回车键)事件 <el-form @submit.native.prevent> &

当表单(form)中仅有一个输入框时，按回车会触发页面刷新(标准行为)。解决方案：1) 在表单添加@submit.native.prevent阻止默认提交(推荐)；2) 移除form标签；3) 添加隐藏输入框。

当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。

解决方案 1、直接去除掉form表单，当然这是最简单粗暴的方法。 2、如果一个input会自动提交，那么比较容易想到的是再加一个input。值得注意的是 这里的input不能设置type为hidden，这样一样是不生效的，form一样会认为只有一个input。需要设置成<input type="text" class="form-control" style="display:none">。 3、给input加上回车事件直接return false。在input加上οnkeydο...

在项目中使用form表单时只有一个输入框，输入框绑定了回车触发提交事件，但输入内容按回车时并未执行事件函数，反而刷新页面。

1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">

刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。

el-input v-model="searchDetailData.Name" placeholder="请输入工作内容" clearable @keydown.native="handleEnter"></el-input>在el-form中，如果只有一个input的话，按回车表单会自动提交，刷新页面。1.只有一个的话直接不用el-form表单；2.给input加上停止回车的事件。来阻止表单的默认提交行为。

问题描述：在提交某项业务时，需要输入一次密码，点击下方确定后提交，但是当el-input有焦点时，按下回车会发生页面刷新事件，url中的参数也被清空。 代码如下： <div class="password ft12"> <el-form> <el-form-item label="签约密码：" label-width="95px" prop="pas...

表单本身存在默认行为，在 HTML 中，表单元素默认是可以被提交的。当你在输入框中按下回车时，浏览器会认为你想要提交该表单，从而触发提交事件，导致页面刷新。因为el-form本质上也是表单所以遵循HTML默认规则。在使用el-form组件时，输入框回车导致页面刷新的原因主要是由于浏览器的默认行为。具体来说，当你在一个表单中按下回车键时，浏览器会尝试提交表单，这会导致页面刷新。

搞定：el-form el-form-item 下input框回车刷新整个页面

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。 解决办法是在 <el-form> 上添加 @submit.native.prevent 属性 <el-form @submit.native.prevent></el-form>

form 表单只有一个input 时，回车自动提交表单造成页面刷新效果