el-input @keyup.enter.native实现回车绑定相关事件

最新推荐文章于 2024-04-26 16:47:03 发布

敲代码无敌小奶龙

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量441

点赞数 1

分类专栏： js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53986004/article/details/128838268

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

2023.2.1今天我学习了如何使用el-input按下回车也能实现添加/修改/删除等效果。

js代码：

<el-form>
  <el-form-item label="数据111">
     <el-input @keyup.enter.native="submit()"/>
  </el-form-item>
  <el-button @click="submit()">确定</el-button>
</el-form>

优惠劵

敲代码无敌小奶龙

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
el-input @keyup.enter.native实现回车绑定相关事件

el-input @keyup.enter.native实现回车绑定相关事件
复制链接

扫一扫

专栏目录

vue中el-input绑定键盘按键(按键修饰符)

11-20

vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。解决办法：加上.native原生事件修饰符即可。

vue.js项目 el-input 组件监听回车键实现搜索功能示例

12-29

el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter <el placeholder=搜索 icon=search v-model=input on-icon-click=pchandleIconClick keyup.enter.native=...

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

如何给 el-input 添加键盘回车事件

乐辞的博客

09-29

6335

查找 Element UI 的 input输入框组件（el-input组件），都没有发现可以给输入框添加的回车键监听事件，因为Element UI对其做了进一步封装，想要直接添加 @keydown（或者@keyup.enter）是无效的。发现，添加了 .native 修饰符的 el-input 组件会有原生的 keyup 事件，其实就是在组件的根标签上添加了一个事件监听。要想在el-input中实现回车键监听事件，需要在@keyup.enter后面加上.native，即。

【Element 】vue3 中 Element el-input textarea 回车发送不换行，ctrl+enter 实现换行

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

11-28

2119

个人样式，可以参考，主要是去掉边框、缩放图标和高度问题。

vue3和ts的el-input的键盘回车绑定事件

weixin_51244498的博客

02-17

2893

vue3和ts的el-input的键盘回车绑定事件

Vue(ElementUI)监听e-input输入框，完成编辑判断数据是否修改

cdd9527的博客

11-10

4081

Vue(ElementUI)监听e-input输入框，完成编辑判断数据是否修改

ElementUI input输入、button enter回车事件

Cheung1992的博客

10-11

4360

1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件

el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部

weixin_44817062的博客

08-16

2005

el-input 按键绑定Enter方法、 .native 的含义与使用、vue锚点跳转、路由跳转下一页默认停留在顶部一、el-input 按键绑定Enter方法给enter键绑定@click="searchEntInfo()查询方法 @keyup.enter.native="searchEntInfo" 二、@click.native中 .native 的含义与使用 .native：侦听组件根元素上的原生事件作用：给组件绑定原生事件 @click是我们在vue开发中经常用到的事件绑定，而@实际

Element 输入框input响应回车事件

s_156的博客

02-22

1513

Element 输入框input响应回车事件

Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积累

yehaocheng520的博客

04-12

6936

Element UI 中el-input 框回车触发页面刷新问题及解决方案——基础积累

vue项目如何实现input输入框回车后，触发登录事件

qq_52526079的博客

10-25

1367

2.在mounted钩子中添加，通过ref给el-form添加事件，使子元素el-input输入框也可以触发该事件。注释：如果你在elementui的el-input框绑定该事件，是不会被触发的。注释：此方法可以在el-input输入框中绑定键盘事件。

vue:el-input输入时限制输入的类型操作

11-19

通过@keyup.native的时间动态监控输入的类型 1.手机号码,只能是数字,如果输入了非数字直接清空 2.身份证号码,除了Xx和数字其余的一律清空 3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决...

vue快速入门（四十六）Router的安装与使用

最新发布

不起眼小菜菜的博客

04-26

430

步骤很详细，直接上教程……

vue echarts 柱状图堆叠柱状图

Z18834071903的博客

04-26

208

vue echarts 柱状图堆叠柱状图

vue 实现级联选择器功能

清音的博客

04-22

532

数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。

vue-manage-system 更新，后台管理系统开发更简单

林鑫

04-22

426

微信小程序vue.js+uniapp服装商城销售管理系统nodejs-java

专注分享bishe530的博客

04-21

422

最基本的是，Spring Boot是一个可以被任何项目的构建系统使用的库集合。Spring Boot 是 Spring 家族中的一个全新的框架，它用来简化Spring应用程序的创建和开发过程。（4）实证研究法：自己进行大量的编码测试，一切从动手编码出发，结合自己以前的编程基础，实现系统所需要的功能。entity: 实体，用来放与数据库表里对应的实体类，表中的字段对应类中的属性值，并附有set/get方法。（1）调查法：从实际的系统开发目的出发，结合系统需求调研，得出本系统的功能结构模块。

Vue-router的动态路由：获取传递的值

woliuhuaqiangla的博客

04-22

407

Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。

<el-input @keyup.enter.native="login" @keydown.native="onkeydown" @input="input" placeholder="请输入密码" v-model="form.showPassword" />

07-15

- `@keyup.enter.native="login"`：当用户在输入框中按下回车键时，触发 `login` 方法。 - `@keydown.native="onkeydown"`：当用户按下键盘上的任意键时，触发 `onkeydown` 方法。 - `@input="input"`：当用户在...

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交