对vue 键盘回车事件的实例讲解（收藏）

最新推荐文章于 2024-05-16 19:06:13 发布
最新推荐文章于 2024-05-16 19:06:13 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue

原文地址：https://www.jb51.net/article/146249.htm

如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

1

2

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>

现在发现这个键盘事件好像对input框支持比较好，其他的元素多少会有点问题，或者直接无效，究其原因是其他的元素没有获取焦点或者没有键盘事件。

我现在的解决方式，

如果是没有键盘事件使用css把input框绝对定位到需要绑定键盘事件的元素之上并且把input框设置为透明，把该input框与原来要绑定键盘事件的元素进行绑定，达到效果；

test.vue

1

2

3

4

5

<div class="container">

 <input class="item opa" @keyup="deleteDiv">

 <div class="item">div内容</div>

 <span click="DeleteDiv">X</span>

</div>

css：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

div.container{

 position:relative;

}

.item{

 position:absolute;

 top:0;

 left:0;

 width:100px;

 height:100px;

 border:1px solid #ccc;

}

.opa{

 opacity:0;

 z-index:5;

}

span{

 position:absolute;

 top:5px;

 right:5px;

 z-index:10;

}

js：

?

1

2

3

4

5

methods:{

 deleteDiv(){

 alert("delete");

 }

}

如果是没有获取焦点，则可以写一个自定义指令自动获取焦点，

自动获取焦点自定义指令见我另一篇文章 点击进入

拓展知识：vuejs 2.0 键盘事件详解

如下所示：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

<head>

 <title></title>

 <meta charset="utf-8">

 <script src="vue.js"></script>

 

 <script type="text/javascript">

 window.onload = function(){

  var vm = new Vue({

  el:'#box',

  methods:{

   show:function(ev){

   if(ev.keyCode == 13){

    alert('你按回车键了');

   }

   },

  }

  });

 }

 </script>

</head>

<body>

 <div id="box">

 <input type="text" placeholder="请输入" @keyup="show($event)">

 

 <input type="text" placeholder="请输入" @keyup.13="show($event)">

 </div>

</body>

</html>

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

两个input的效果都是一样的 如果安13 也就是按键 enter 才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

WebKoalaBoy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 的 回车（enter）事件
News777的博客
09-02 9237
Vue3 的 回车（enter）事件
对vue 键盘回车事件的实例讲解
10-18
今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 项目软键盘回车触发搜索事件
10-14
主要介绍了vue 项目软键盘回车触发搜索事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue3，ts,el-input的enter事件
weixin_47793882的博客
03-30 2755
当el-form只有一项内容时，按entere键会出现一些错误，我们可以在el-form加onSubmit，来阻止默认事件。 return ()=>{ <> <el-form model={formData} onSubmit={(e: Event) => { handleEnter(e); }} > <el-form-item label="数量:" prop="num"> el-input v-model={data.num}
vue3 键盘事件 回车发送消息，ctrl+回车 内容换行
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-16 680
【代码】vue3 键盘事件 回车发送消息，ctrl+回车 内容换行。
Vue 中使用回车键触发事件的方法详解
pleaseprintf的博客
06-27 1万+
在 Vue 前端开发中，我们经常需要在输入框或表单中使用回车键触发某个特定的事件，例如提交表单或搜索数据等。本文将详细介绍如何在 Vue 项目中使用回车键触发事件的方法，帮助你轻松处理各种键盘事件。除了使用事件修饰符，我们还可以自定义指令来监听回车键的按下事件。这种方式更加灵活，可以适用于更多场景。-- 其他表单元素 -- > < / div > < / template > < script > export default {enter : {} });
Vue之事件处理（包括键盘事件）
花&败
11-27 3179
那么在我们点击div2的时候，就会依次出现左边蓝色箭头的捕获阶段和右边红色箭头的冒泡阶段，我们可以知道真正的事件处理在冒泡阶段，最终的结果就是先触发div2的点击事件，再触发div1的点击事件。这个时候我们就可以使用capture事件修饰符，我们最后的结果变成为先触发div1的点击事件，再触发div2的点击事件。倘若我们现在给div加一个self修饰符，那么当冒泡到div的时候发现event.target不符合当前div元素，就不会触发事件，从另一个角度说我们可以利用这一点去阻止冒泡。
vue：添加enter事件，键盘敲下enter事件
热门推荐
呆子小木心的博客
09-24 3万+
vue项目中遇到点击查询按钮可以查出数据，点击回车键也能查出数据，所以就想点击回车键时调用查询方法。 示例代码如下： 一、第一步： 给input按钮绑定@keyup.enter；如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。 <div class="btn"> <!--如果是封装过的按钮，不是原生的按钮，需要加上.native才能生效--&
vue 回车触发事件
cjj123580的博客
06-28 3062
登录页面,输入完成后 回车触发事件。步骤一: input里绑定回车事件。
Vue按回车键进行搜索
weixin_49813550的博客
08-02 1万+
Vue项目按回车键进行搜索 最近有一个需求，为了用户方便进行搜索数据的时候不想点击搜索按钮，想要在表单内输入完成之后直接按回车键进行搜索。根据vue+ElementUUi完成。 下面直接上代码 1、现在el-input里面添加这一行代码 @keyup.enter.native="seachEnter" 2、写seachEnter事件 seachEnter(e) { var keyCode = window.event ? e.keyCode : e.which; if (ke
对vue事件的延迟执行实例讲解
01-19
vue事件的延迟执行： <input type=text @keyup=show | debounce 2000>...以上这篇对vue事件的延迟执行实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue 项目中使用键盘回车或空格按键触发事件
小破孩的博客
12-06 8598
vue 项目中使用键盘回车或空格按键触发事件
vue 项目中使用键盘回车按键触发事件
pickinguptrash的博客
02-13 3258
我最近项目要求按下enter键就登录或者注册之类的触发,我不知道为什么用vue的 @click.enter这样的不管用,到现在都没整明白为啥,希望知道的给讲解一下.然后在methods里面加上一个方法,监听这个方法,e.keyCode 是每个按键的编码，13是回车键。但是,监听不去掉不太好,有点冗余,所以可以在。vue声明周期销毁前和销毁时移除这个监听。我看了半天人家是给页面加了一个监听。
vue绑定回车键的触发事件
galaxyJING的博客
02-28 965
来监听回车键的按下事件。当用户在输入框内按下回车键时，会自动触发指定的方法或函数。vue绑定回车键的触发事件。在Vue中可以通过使用。
Vue键盘事件的使用
见证自己学习,成长的记录
03-08 4407
在vue中，我们经常会用到键盘事件，不管是我们按下某个键，其实都是一次键盘事件的调用，下面就介绍下Vue中的键盘事件先写一段代码，这里我选择的键盘事件是keyup,当然用keydown也是没问题的问题来了，什么按键都能触发事件，我们期望的是只能按下回车键才能打印输入的值， 那么：如何判断回车呢？如果我们想要绑定的按键不在vue提供的9个按键内，那该怎么办呢？比如我就想要用CapsLock(切换大小写)首先要知道：键盘上任意的一个按键都有自己的按键和编码。
Vue框架学习笔记——键盘事件
Aer_7z的博客
11-25 1459
简单介绍一下Vue中的键盘事件，为keydown和keyup事件绑定按键。
【Vue学习】——键盘事件
甄_的博客
10-15 266
【代码】【Vue学习】——键盘事件。
vue中enter回车键事件
月来better
01-16 1万+
项目中在搜索商品时，在没有搜索按钮的情况下，刚开始是写的当用户输入完成后，input框失去焦点blur事件处理，产品提议用户输入后，按enter回车键返回搜索结果。 vue中失去焦点事件写法：@blur vue中enter回车键事件写法：@keyup.enter.native <el-input v-model="searchName" @keyup.enter.native="toSearch()" placeholder="请输入搜索的名称"></el-input> to
Vue学习：键盘事件
weixin_47295886的博客
12-12 3301
别名：vue给常用的按键取了别名--一共有9个 回车==>enter 删除==>delete(退格和删除) 退出==>esc 空格==>space 换行==>tab 上==>up 下==>down 左==>left 右==>right tab需要使用keydown使用
vue3监听键盘回车事件
最新发布
07-06
在 Vue 3 中，监听键盘回车事件通常通过 `@keydown.enter` 或 `@keyup.enter` 修饰符来实现，这两个修饰符会分别在用户按下或释放 Enter 键时触发。下面是一个简单的例子： ```html <template> <div @keydown.enter="handleEnterEvent"> <!-- 输入框或者其他元素 --> <input v-model="inputValue" /> </div> </template> <script> export default { data() { return { inputValue: '', }; }, methods: { handleEnterEvent(event) { if (event.key === 'Enter') { // 回车事件处理逻辑，例如提交表单 console.log('用户按下了Enter键'); } }, }, }; </script> ``` 在这个例子中，当用户在输入框内按下回车键，`handleEnterEvent` 方法会被调用。记得在实际项目中替换相应的业务逻辑。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值