element form 表单输入框回车时页面刷新

A small

已于 2022-07-13 17:45:03 修改

阅读量312

点赞数

文章标签： javascript 前端 html 前端框架 elementui

于 2022-07-12 16:46:56 首次发布

本文链接：https://blog.csdn.net/zjmxbd/article/details/125746363

版权

当element form 表单中只有1个input 输入框时，回车时会触发默认事件使页面刷新，

  <el-form :model="searchForm" >
    <el-form-item label="角色名称">
      <el-input v-model="searchForm.role_name" placeholder="请输入角色名称" />
    </el-form-item>
  </el-form>

  解决方案：给el-form 表单添加@submit.prevent 来阻止默认事件
  附：element 官网

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A small

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element form 表单输入框回车时页面刷新

当element form 表单中只有1个input 输入框时，回车时会触发默认事件使页面刷新，
复制链接

扫一扫

解决form表单提交刷新问题

sunlizhen的专栏

01-17

7301

vue + element ui 阻止表单输入框回车刷新页面如果button不设置 type='button' 问题　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。解决方案　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。测试下面的代码出现表单回车提交 <...

vue+elementUI el-form 查询导致页面刷新

qq_29236119的博客

03-10

812

1、列表点击查询条件返回具体的内容，当输入查询条件按下回车或者是点击查询按钮时候发生页面刷新，并没有去查询，很是费解，其他页面就没有这种情况，然而最后发现导致问题发生的原因竟是当表单只有一个文本框时，查询会触发表单提交事件，导致页面刷新，代码如下： <el-form :inline="true" :model="dataForm" @keyup.enter.native="getSearchDataList()"> <el-form-item label="宠物名称">

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

elementUI/Plus 输入框按回车刷新页面分析与解决

最新发布

共同学习，共同成长

05-09

1463

如果你是在 ElementUI 或者 elementPlus 框架中使用组件，并希望阻止回车键导致的页面刷新，你可以使用Vue的.prevent修饰符来阻止默认的表单提交行为。

element (vue) 组件传值组件初始化强制刷新

谢院柯的博客

09-14

2544

强制刷新 $forceUpdate() ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200914112225863.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzMDMwOA==,size_16,color_FFFFFF,t_70#pic_center) ...

vue项目中使用this.$forceUpdate()进行强制刷新

Grady_H的博客

03-23

2619

问题：解决页面v-for中，如果层次太多，有时候数据发生改变但是页面上看到的效果是毫无变化。解决：运用 this.$forceUpdate()强制刷新案例：页面部分： <el-form :model="form" label-width="100px" style="width: 800px" class="demo-ruleForm" > <el-form-item

vue+elementUI表单导致页面刷新

Lifelong learning

12-09

1766

vue+elementUI表单导致页面刷新点击按钮导致整个页面刷新，部分数据没有请求，偶尔会正常，可能和网络请求有关解决方法：可以在标签上添加 @submit.native.prevent 或者给button 添加 type=“button” 属性 Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。亲测两种方式均可 ...

elementUI el-form阻止表单输入框回车刷新页面

StacyMo的博客

10-20

1737

elementUI el-form阻止表单输入框回车刷新页面回车页面会刷新的原因：当form表单中只有一个input输入框时，按下回车就会刷新页面，因为form表单把该事件当成了提交表单。解决方法：在el-form中添加一个属性： @submit.native.prevent ...

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

01-19

今天发现输入框输入内容后回车就会刷新页面解决 el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定： When there is only one single-line text input field in a ...

表单元素事件 (Form Element Events)

09-05

这些事件只在特定的表单元素上触发，比如输入框、按钮、选择列表等。了解并熟练运用这些事件能够帮助开发者创建更动态、更响应式的用户界面。一、onchange事件 `onchange`事件在用户更改了表单元素的值并且该元素...

页面只有一个text的时候，回车自动submit的解决方法

09-05

在网页设计中，用户在文本输入框（`<input type="text">`）按下回车键时，浏览器通常会默认执行表单提交操作，导致页面刷新。这种情况在标题描述的场景下尤为突出，即页面只有一个文本输入框。当开发者希望在用户按...

网页按ctrl+回车提交

04-15

在这个例子中，当用户在输入框中按下Ctrl+Enter时，表单会被提交，而不会引发页面刷新。这就是“网页按ctrl+回车提交”的基本实现原理。这个功能可以在任何需要提高用户交互效率的表单场景中使用，比如在线聊天、...

Ctrl+Enter键按钮提交表单代码.zip

11-17

如果检测到用户按下了Ctrl键和Enter键，代码会阻止默认的回车提交行为（因为通常回车键会提交表单），然后手动调用`form`的`submit`方法来提交表单。 jQuery库可以简化JavaScript代码，它提供了一套丰富的API来处理...

element form 表单enter触发页面刷新

yangqii的博客

08-11

837

问题：在使用el-input组件时，为了操作方便，监听了@keyup.enter，默认会执行form的submit事件，直接enter键提交，但是首次提交时会出现页面刷新。方法一：el-from 加上 @submit.native.prevent element官网文档W3C 标准中有如下规定： When there is only one single-line text input field in a form, the user agent should accept Enter in tha

ElementUI 解决遇到的一些问题

qq_279364752的博客

03-13

379

element-ui 经常遇到的问题

elementUI 表格页面层级嵌套过多不及时刷新/错位的解决办法

weixin_44805839的博客

07-12

3037

elementUI 表格页面层级嵌套过多不及时刷新/错位的解决办法

el-form表单-解决按下回车页面刷新

m0_65039133的博客

06-12

640

刷新原因：在element-ui中，el-form中只有一个el-input时，按下回车会刷新页面。解决办法：给el-form添加@submit.native.prevent属性。

解决 element-ui form 表单按回车后整个页面刷新

Zoey_J的博客

08-20

1489

设置 @keyup.enter.native 后，当 el-form 中只有一个输入框时，按下回车会刷新整个页面，只需要在 el-form 上加 @submit.native.prevent 即可。 <el-form :model="queryParams" @submit.native.prevent> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" @keyu

element提交表单第一次会刷新后续操作一切正常

qq_40787608的博客

08-29

679

element ui首次提交表单会刷新页面

关于form表单点击submit按钮后，页面自动刷新的问题解决

白嫖怪的博客

01-14

6354

解决 form表单点击 submit 按钮，页面自动刷新问题。

element ui form 表单 label在上,input输入框在下

06-12

要实现 Element UI 表单的 label 在上方，input 输入框在下方，可以使用以下步骤： 1. 在 el-form 上添加属性 label-position="top"，这会让表单的 label 放在上面。 2. 在 el-form-item 上添加属性 label-width，...