在 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>

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

  1. i利用图片按钮 和 input type="image" 为背景提交表单

    <img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...

  2. 单档——PK单号新增、修改时不允许编辑，PK单号自动生成

    由系统自动生成单号(日期+流水),用户新增.修改时不允许编辑单号: 范例(cxmt631): 1)在#单头栏位开启设定#中,即 cxmt631_set_entry(p_cmd)下: #add-poin ...

  3. form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)

    form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...

  4. 使用 elementUI 的表单进行查询，表单中只有一个文本框时，回车会自动触发表单的提交事件，导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

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

    <form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...

  6. php 提交表单

    滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园   首页   博问   闪存     联系   订阅  管理 随笔-58  评论-2017  文章-5  trackba ...

  7. js 回车提交表单的实现

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  8. java 传入用户名和密码并自动提交表单实现登录到其他系统

    不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import ...

  9. 【转载】input 中 type='text' 的提交问题

    原文链接:http://www.nowamagic.net/html/html_AboutInputSummit.php 有时候我们希望回车键敲在文本框(input element)里来提交表单(fo ...

随机推荐

  1. Budgie Desktop in Linux 无法使用触摸板右键功能

    问题描述 Budgie桌面在Linux环境下很好用,不过最近发现触摸板的右键功能是不可用的 解决方法 经查阅Gnome官方文档(Budgie有很多功能基于Gnome)发现是Gnome官方把这个功能去掉 ...

  2. 使用 PDBDownloader 解决 IDA 加载 ntoskrnl.exe 时符号不完全问题

    解决 IDA 加载 ntoskrnl.exe 时符号不完全问题 1. 问题:IDA加载xp系统的 ntoskrnl.exe 加载不完全. 2. 尝试过但未成功的解决方案: 1)配置好的IDA的 pdb ...

  3. C#使用SharpZipLib创建压缩文件，并指定压缩文件夹路径（解决SharpZipLib压缩长路径显示问题）

    在项目中使用SharpZipLib压缩文件夹的时候,遇到如果目录较深,则压缩包中的文件夹同样比较深的问题.比如,压缩当前程序目录下的某个文件夹(D:\cx\code\program\bin\debug ...

  4. ASP.NET中的请求验证

    这两天做项目的时候偶然发现项目中的保存功能的时候出现这样的异常:异常详细信息: System.Web.HttpRequestValidationException: 从客户端(XXXX)中检测到有潜在 ...

  5. 理解类、对象、实例、原型链以及继承 - WPF特工队内部资料

    理解类.对象.实例.原型链以及继承 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. C#下的时间测试(用于计算方法执行时间)

    public class Timing { private TimeSpan m_StartTime; private TimeSpan duringTime; public Timing() //构 ...

  7. EF CodeFirst 使用T4模板

    实用等级:★★★★★ 首先,定义一个接口,代表一个领域实体.在定义一个实体集成这个接口,面向接口编程的各种好处就不提了. /// <summary> /// 代表一个领域实体 /// &l ...

  8. Scrapy-Splash简介及验证码的处理(一)

    目录 一:Splash简介与准备 二:验证码的识别(1)   在之前的博客中,我们学习了selenium的用法,它是一个动态抓取页面的方法,但是,动态抓取页面还有其他的方法,这里介绍Splash方法, ...

  9. 本机与虚拟机Ping不通

    关闭防火墙,设置虚拟机和本机在同一网段,还是ping不同 解决方法:在VMware中点击 编辑---->虚拟网络编辑器----->更改设置 ------->还原默认设置 然后重新配置 ...

  10. vue打包后刷新页面报错：Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...