vue中form表单支持回车键提交踩坑

平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索.

此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称"
然后在方法触发时判断keyCode是否等与13 如果是13则证明触发了回车键

例如:

<Form :label-width="100" :model="searchForm" inline ref="searchForm" @keydown.enter.native="searchEnterFun" @submit.native.prevent><FormItem label="搜索关键词：" prop="keyword"><Input clearable placeholder="支持模糊搜索" style="width: 200px" type="text" v-model="searchForm.keyword"/></FormItem><FormItem style="margin-left: -75px"><Button @click="handleSearch" icon="md-search" type="primary">搜索</Button><Button @click="handleResetSearch">重置</Button></FormItem>
</Form>

searchEnterFun(e) {//which 和 keyCode 属性提供了解决浏览器的兼容性的方法。//keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码var keyCode = window.event? e.keyCode:e.which;if (keyCode == 13) {this.getCustomList();  //搜索事件}
},

嗯,回车触发表单提交的实际应用就简单介绍这么多,接下来我们来说说这里面的坑

1.使用vue开发，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新。
2.回车后页面进行了刷新并且在跳转 URL中也多出了 ?
3.再次回车查询正常，不会刷新了
那么我们来说说产生此bug的原因以及解决方案

bug原因:在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

资料依据:

W3C 标准中有如下规定：

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.

当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案:

在FORM标签中加入@SUBMIT.NATIVE.PREVENT阻止事件即可

大家仔细看我最上面的示例代码不难发现本人已经添加,实在是这个坑跌的我差点爬不出来!!!

因此特做此纪录,防止自己重复跌坑,也方便给已经跌坑的道友扔出"希望之梯"......

vue中form表单支持回车键提交踩坑相关推荐

Vue中form表单提交问题
关于input组件回车后,默认提交form表单出现的问题: <div class="searchArea"><form action="###&quo ...
django中form表单post无法提交
报错403:Forbidden (CSRF token missing or incorrect.) 解决方法方法一: 把settings.py文件中含有csrf那一行注释掉方法二: 1.导入cs ...
vue的form表单在提交成功后置空
vue的form表单在提交成功后置空 form表单说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...
利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
vue 给form表单赋值_vue获取form表单的值示例
vue获取form表单的值示例这里使用的是Element-ui组件 html: JS: var phone = this.phone; var password = this.password; v ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
Form表单回车(Enter)提交表单问题
Form表单回车(Enter)提交表单问题在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...

vue中form表单支持回车键提交踩坑

vue中form表单支持回车键提交踩坑相关推荐

最新文章

热门文章