头闻号

谭立民

护肤膏霜|洗面奶

首页 > 新闻中心 > 科技常识:form表单input回车提交问题
科技常识:form表单input回车提交问题
发布时间:2024-11-19 18:35:50        浏览次数:1        返回列表

今天小编跟大家讲解下有关form表单input回车提交问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关form表单input回车提交问题 的相关资料,希望小伙伴们看了有所帮助。

问题:

文本框输入完成后点击回车页面刷新。问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

解决方法:

1、增加一个隐藏的输入框

<input itype="text"style="display:none"/>

增加了一个隐藏的输入框之后,表单的文本框不再是唯一的,回车不会触发提交事件

2、去掉输入框的回车事件

<input type="text"onkeydown="return ClearSubmit(event)"/>function ClearSubmit(e) { if (e.keyCode == 13) { return false; }}

但是有的需求又要有回车事件,视情况选择

3、阻止表单默认提交事件

如果 onsubmit 句柄返回 fasle,表单的元素就不会提交。如果该函数返回其他值或什么都没有返回,则表单会被提交。

由于 onsubmit 句柄可以取消表单的提交,所以它对于进行表单验证是十分理想的; 这样的话,修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url,如下

<form action="myurl"onSubmit="fun1();return false;">

变种:element官方解决方案:在el-from 加上 @submit.native.prevent

<el-form :inline="true"class="demo-form-inline"@submit.native.prevent> <el-form-item label="名称:"style="margin-bottom:0"> <el-input placeholder="名称"@keyup.enter.native="doFilter(5)"v-model="likeName"></el-input> </el-form-item> <el-form-item style="margin-bottom:0"> <el-button class="btnCheck"@click="doFilter(5)"style="margin-bottom:0">查询</el-button> </el-form-item></el-form>

来源:爱蒂网