当前位置: 首页> 财经> 股票 > 保定网络关键词排名_建筑工程找工作平台_郑州网站优化外包顾问_网站的优化和推广方案

保定网络关键词排名_建筑工程找工作平台_郑州网站优化外包顾问_网站的优化和推广方案

时间:2025/7/9 5:50:26来源:https://blog.csdn.net/qq_42968609/article/details/144606180 浏览次数:0次
保定网络关键词排名_建筑工程找工作平台_郑州网站优化外包顾问_网站的优化和推广方案

问题描述:

form 表单出查询条件需要实现 input 输入完成后键盘回车查询:@keyup.enter=“handleQuery”,如果 form 里只有一个input,回车没有触发事件,而是刷新页面,放两个input就没问题

问题原因:

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.

即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。 如果希望阻止这一默认行为,可以在 < el-form > 上加一个@submit.native.prevent

解决方法:

阻止表单默认提交行为

  • form表单上加一个@submit.native.prevent
  • el-input 增加 @keyup.enter.native

vue2 示例:

<el-form @submit.native.prevent ><el-form-item><el-input v-model="num" @keyup.enter.native="handleQuery"></el-input></el-form-item><el-form-item><el-button @click="onCancel()">取消</el-button><el-button type="primary" @click="onNext">确定</el-button></el-form-item>
</el-form>

注意:
.native修饰符在vue3中被弃用
解决方法: < el-form > 添加 @submit.prevent

类似问题 vue项目中 点击提交按钮路由多了个问号

关键字:保定网络关键词排名_建筑工程找工作平台_郑州网站优化外包顾问_网站的优化和推广方案

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: