表单只有一项 input 时按回车键会提交表单

在 Vue 中 使用 Element UI，使用表单  el-form 只有一个  el-input  项，使用  @keyup.enter.native 来处理回车事件。

结果发现按下回车时页面总会被刷新？？

第一反应查询关键字 vue、 element、 el-form ……

结果发现是 HTML 的已知 bug（feature）……

https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

好吧 那怎么解决呢

1. 加一个表单项 不显示就可以了。使用  <input type="hidden"> 是不行的 要用  <input type="text" style="display:none">

2. 阻止 submit 事件刷新页面  <form method="post" onsubmit="return false;">

在 Vue 中 <form v-on:submit.prevent="onSubmit"></form>

在 Element 中  <el-form @submit.native.prevent></el-form>

原文地址：https://www.cnblogs.com/wenruo/p/11684710.html

时间： 2024-08-02 10:58:58

表单只有一项 input 时按回车键会提交表单的相关文章

当form表单中只有一个input时按回车键将会自动将表单提交

添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交.

在有多个input的表单当中按回车按钮，如何不自动提交表单，而触发某个按钮的事件

<form action="checkLogin.do" class="login-form" method="post" id="OIform" onSubmit="return false;"> <input type="text" name="notautosubmit" style="display:none"/>

阻止form元素内的input标签回车提交表单

<form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { if (event.keyCode == 13) return false; }) 原文地址:https://www.cnblogs.com/wujiaqi/p/10248828.html

提交表单详解

阅读目录 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Ajax方式提交整个表单 以Ajax方式提交部分表单 使用JQuery,就不要再拼URL了! id, name 有什么关系 使用C#模拟浏览器提交表单 资源链接 Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net W

在javascript中关于submit和button提交表单区别

原文:在javascript中关于submit和button提交表单区别 原文来自:http://www.jb51.net/article/42236.htm submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. 1. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的

提交表单的4种方式

1,超链接 <!-- 链接到page2 --> <a href="page2.jsp">链接到page2</a><br> <!-- 链接到page2,弹出新窗口 --> <a href="page2.jsp" target="_blank">链接到page2</a><br> <!-- 相对路径链接到page2 --> <a href=

禁止按回车键提交表单

禁止按回车键提交表单,有时候我们按回车键提交很实用,但容易使表单出错,所以我们不想让用户按了回车键就提交表单,那该怎么办呢?只要在标签里加入 onkeydown="if(event.keyCode==13){return false;}" 就可以了,为了保险其见,我们在提交表单的按钮上再加一个确认提交函数,这样就万无一失了. <body> <form name="myform" action="" onkeydown="

js 回车提交表单的实现

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:    1. 如果表单里有一个type="submit"的按钮,回车键生效.    2. 如果表单里只有一个type="text"的input

回车自动提交表单

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type=”submit”的按钮,回车键生效.如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效.如果按钮不是用in