1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > form 表单只有一个input 时 回车自动提交表单造成页面刷新效果

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

时间:2019-05-12 03:35:31

相关推荐

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

现象:el-form 中仅有一个input,input上设置了回车响应事件,首次按回车键后,页面刷新,再次按回车才执行了响应事件

<el-form ref="form" @submit.native.prevent><el-form-item><el-input @keyup.enter.native="onSMSCodeSubmit('form')" ></el-input></el-form-item></el-form>

先了解一下 form 标签

form表单中只有一个input时,按回车键,会自动提交表单(见1),并且url 多一个问号(见2)

https://www.rfc-/rfc/rfc1866.txt

(1) 查看目录8.2

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

(2)查看目录8.2.2

如果 form 表单没有指定 action 属性,按回车键,会向当前url提交,实际起到了页面刷新的效果,但是这时提交并没有传表单参数,也就是仅仅只有现url。

所以要解决的问题不是页面刷新,而是取消form 内只有一个input时按回车键的默认提交行为

解决方法

一、干预form表单行为

对于原生form标签,阻止form表单的提交:

在form标签中添加事件

<form οnsubmit="return false;”>

对于vue中

取消form表单默认提交行为,可以在 标签上添加@submit.native.prevent

vue 事件修饰符

二、破坏“只有一个input”的条件

增加一个input dom 节点,设置为不显示

<form action=""><input type="text"><input type="text" style="display:none;"></form>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。