在 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. Kafka 2.3 Producer (0.9以后版本适用)

    kafka0.9版本以后用java重新编写了producer,废除了原来scala编写的版本. 这里直接使用最新2.3版本,0.9以后的版本都适用. 注意引用的包为:org.apache.kafka. ...

  2. Servlet中实现多个功能案例

    如何实现一个Servlet中的多个功能 前言:唉,打脸了,前脚刚说过要跟Servlet正式告别,后脚这不又来了,哈哈,总结出一点东西,纠结了一下还是做个分享吧,学习知识比面子重要,对吧,下回再也不约S ...

  3. GitFirstRemote

    1.$ git ls-remote From git@github.com:Smoothfu/WPFITEMSSOURCEPRODUCTCOLLECTION.git9a6669a2e2c9e22b30 ...

  4. C# winform打开新窗体显示一段时间 关闭新窗体

    1.form1的button事件下: form2 form = new form2(); form.Show(); Thread.Sleep(10000);  //form2窗体显示10秒 form. ...

  5. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  6. android studio学习----android studio断点调试

    先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试. IDE下方出现Debug视图,红色的箭头指 ...

  7. ANDROID培训准备资料之BroadcastReceiver

    BroacastReceiver的启动方式? (1)     创建需要启动的BroadcastReceiver的Intent. (2)     调用context的sendBroadcast()或者s ...

  8. Jmeter吞吐量控制器

    吞吐量控制器 场景: 假如有两个业务分别是A, B在同一线程组内有10并发, 7个做A业务, 3个做B业务,吞吐量控制器比较推荐使用. 添加吞吐量控制器 ​ 用法1: Percent Executio ...

  9. infinity新标签页失效

    安装infinity新标签页后,无法生效,或者infinity新标签页突然失效了. 驱动精灵的问题 驱动精灵安装后,还会安装其它的软件,在卸载后,安装的软件还存在. 解决办法 光卸载驱动精灵还不够,还 ...

  10. 【ORACLE】Oracle提高篇之DECODE

    DECODE含义 decode(条件,值1,返回值1,值2,返回值2,…值n,返回值n,缺省值)这个是decode的表达式,具体的含义解释为: IF 条件=值1 THEN RETURN(翻译值1) E ...