Vue-cli+Element （阻止表单输入框回车刷新页面）

最新推荐文章于 2024-06-20 20:06:05 发布

小豆花儿

最新推荐文章于 2024-06-20 20:06:05 发布

阅读量1.6k

点赞数 1

分类专栏：随手记文章标签： vue-cli 表单

本文链接：https://blog.csdn.net/qq_39242027/article/details/84942440

版权

随手记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

添加回车事件@keyup.enter.native

<el-form-item>
    <el-input
      placeholder="姓名" v-model="name"  @keyup.enter.native="getList(true)">
      <i slot="suffix" class="el-input__icon el-icon-search"></i>
    </el-input>
 </el-form-item>

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

阻止刷新页面 @submit.native.prevent

<el-form :inline="true" @submit.native.prevent>
</e-form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小豆花儿

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VUE面试题（3）--vue常见面试题

MingL520的博客

05-21

526

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。[info]举个聚焦输入框的例子，如下：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。// 注册一个全局自定义指令 `v-focus`// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})如果想注册局部指令，组件中也接受一个directivesfocus: {// 指令的定义。

vue使用element-ui的el-input监听不了回车事件的解决方法

08-28

小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧

参与评论您还未登录，请先登录后发表或查看评论

vue + element ui 阻止表单输入框回车刷新页面

weixin_30715523的博客

07-18

303

问题　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。解决方案　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。测试下面的代码出现表单回车提交 <body> <div id="app"> <el-form ref="form" ...

el-form下单个el-input文本框回车触发提交刷新的问题

最新发布

wzzjswx的博客

06-20

278

今天在写一个信息搜索栏时,就是一个简单的 el-dialog 弹窗,里面只有一个 el-form 表单和一个 el-input 文本框.另外在歪一下楼.简单说下 el-input 的这两种事件区别,在输入框内分别添加两个事件并进行日志输出.出现的效果如下.接着翻了下 el-form 文档,有个关于这个问题的特别提示.(只有一个文本框会出现该问题,两个就没有)当焦点在文本框内时,按下回车键,会触发表单提交并刷新页面.

(vue)阻止表单输入后回车

nyf_unknow的博客

05-30

371

【代码】(vue)阻止表单输入后回车。

vue 表单阻止默认提交、回车操作

飞翔༒之翼

11-26

2366

1.这个是在项目中遇到的问题:当在from中有一个输入框的时候就会有自动回车事件解决的办法：就是在这个from中添加两个input其中一个隐藏就好了，但这个方法就带来代码多余的问题。 2.在vue中有这样的方法： @submit.native.prevent 阻止默认提交，添加在form标签上 @keyup.native.enter 回车操作，添加在input标签上 ...

基于《狂神说Java》Vue--学习笔记

wudidahuanggua的博客

06-18

1398

本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...

前端技术 ES6、Vue、Node.js、NPM包管理器、Babel、模块化、Webpack、vue-admin-template-master框架、服务端渲染技术NUXT

qq_45491549的博客

08-05

1442

前端技术ES6入门ECMAScript 6 简介二、基本语法Node.js一、简介二、安装NPM一、简介二、使用npm管理项目BabelWebpack一、什么是Webpack二、Webpack安装三、初始化项目四、JS打包五、CSS打包 ES6入门 ECMAScript 6 简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

HTML5-Vue3入门

彭和和的博客

06-17

1277

Vue3基础入门

Vue | Vue 核心【模板语法 + 数据绑定 + MVVM模型 + 数据代理 + 事件处理 + 计算属性computed + 监视属性watch + 渲染+收集表单数据+过滤器 + 内置指令】

不爱吃菜的菜菜的博客

07-05

725

官网Vue：一套用于构建用户界面的渐进式 JavaScript框架特点采用组件化模式，提高代码复用率、且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点。搭建Vue开发环境 vue文件引入关掉Vue控制台提示Vue开发者工具添加到chrome扩展程序里面，就不显示第一个了第二个提示框阻止 vue 在启动时生成生产提示容器的两个作用：区分JS表达式和 JS代码(语句）表达式：一个表达式会产生一

vue textarea阻止回车换行默认行为

weixin_45474673的博客

03-31

3418

textarea 回车换行，导致无法使用回车发送消息 <textarea @keydown="handlePushKeyword($event)" ref="messageInner" style="resize:none" v-model="input_inner" rows="4"></textarea> 回车事件阻止换行 handlePushKeyword(event){ if (event.keyCode === 13) {

vue+element 键盘回车事件导致页面刷新的问题

热门推荐

源码好优多

05-10

1万+

背景今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there...

element 阻止input的enter事件

m0_49016709的博客

08-25

1893

<el-form :inline=“true” :disabled=“disabled” @submit.native.prevent> <el-input type=“number” maxlength=“50” v-model=“warningValue” @keyup.native=“setRange(‘warningValue’,99999,0)”> 1 2 3 4 5 在form 上添加@submit.native.prevent ...

elementUI:阻止form的enter(回车键)事件

webfullstack的博客

01-08

1万+

<el-form :inline="true" :disabled="disabled" @submit.native.prevent> <el-form-item label="请设置预警值"> <el-input type="number" maxlength="50" v-model="warningValue

vue+elementui分页输入框回车与页面中@keyup.enter事件冲突解决

菜鸡奋斗ing的博客

03-14

2230

解决这个问题的思路只要判断事件源是哪个就好。el分页的回车触发事件是在按下时，抬起并不会再触发。而keyup.enter事件是在抬起时触发。 so，找不到分页的回车事件那就拿keyup.enter事件搞事情。只要判断这个抬起事件的$event中的锚点样式判断不等于分页特有的样式就可以了 @keyup.enter="allKeyup($event)" //页面上的 //js中 all...

Vue和elementUI禁用el-pagination的指定分页按钮

楚楚梦厦的博客

06-08

2235

在vue项目中，禁用elementUI的el-pagination的指定分页按钮，适用于后端有最大可查询分页深度的需求。el-pagination添加禁止点击逻辑

Vue+ElementUi 阻止表单输入框回车刷新页面

qq_28584841的博客

01-15

1658

在Vue+ElementUi 项目中，我遇到这样一种情况：在弹窗中有一个输入框（el-input）的情况下，@keyup.enter.native回车会刷新整个页面。解决方案： W3C 标准中有如下规定： When there is only one single-line text input field in a form, the user agent should accept Ent...

vue-element实现前端分页及注意事项

Kätzchen-408的博客

08-12

554

element实现前端分页注意事项:分页table并不是本来就绑定的,需要对数据进行处理实现: 注意事项:分页table并不是本来就绑定的,需要对数据进行处理 element的分页组件和表格组件并不是绑定的,所以如果前端分页的话,分页组件只能控制点击时显示哪部分数据,因此table也只能绑定显示的数据而不是所有数据. 实现: html: <el-table :header-cell-style="{background:'#DFECF0',color:'#000'}"