vue.js 键盘enter事件的使用

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --><input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 --><input v-on:keyup.enter="submit">

<!-- 缩写语法 --><input @keyup.enter="submit">

在使用过程中,如果页面只针对一个Input添加键盘enter事件,可以直接按照官方文档定义的别名增加相应事件就可以了

但是如果是要对页面的button添加enter键盘事件,就不能写在input或者button上,因为获取不到焦点,这时候可以直接写在created里,如下:



<template>
<div class="form-inline col-sm-12">

// 错误写法:这么写没有生效
<input class="form-control search-input" type="search" placeholder="输入用户名进行搜索" aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember">

<button class="btn btn-primary btn-sch" type="button" @click="goSearch">搜索</button>
</div>
</template>
<script>
export default {
name: ‘searchMember‘,
data() {
return {
search_value: ‘‘
}
},

//不能直接将事件添加写在input上,因为这样必须焦点在input上才能触发,所以可以直接绑定在document上即可
created() {
var lett = this;
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
lett.enterSearchMember();
}
}
},
methods: {
goSearch: function() {
let search_nick = this.search_value;
if (search_nick !== 0) {
this.$emit(‘searchMember‘, search_nick)
}
},
enterSearchMember() {
this.goSearch()
}
}
}
</script>



补充一个问题:

当我们对input添加enter键盘事件后,点击enter页面会刷新,可能是因为你把input写在了form里,form会自动提交一次,页面就是一个刷新的效果,这样体验并不好

解决办法:

1、去掉form

2、如果非得用表单,只要不让表单里有且只有一个文本框就OK了

3、在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交



vue全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

原文地址:https://www.cnblogs.com/cristina-guan/p/9440035.html

时间: 2024-10-11 21:25:33

vue.js 键盘enter事件的使用的相关文章

键盘enter事件一个页面绑定多次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js键盘操作事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table id="keybord"> 9 <tr> 10 <td><in

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元

Vue.js 2.0 由浅入深,第一天 day01

### Vue.js 五天 *汤小洋* ## 一. Vue.js简介 ### 1. Vue.js是什么 **Vue.js**也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 + 是一个构建用户界面的框架 + 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular.react类似,其实就是所谓的数据双向绑定 + 数据驱动+组件化的前端开发(核心思想) + 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**

Vue.js 初识

Vue核心库只关注视图层,它不仅易于上手,还便于与第三方或既有项目整合. 前置知识: html+css的基础知识 Javascript的基础知识 node.js初级知识 实践体验: 轻量级的框架 性能优秀 MVVM模式 首先引入Vue.js 通过官方网站:http://vuejs.org/下载Vue.js 编写Vue.js的第一个程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

vue.js事件,属性,以及交互

这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一个百度下拉列表,今天学习完之后,感触最深的就是vue主要是逻辑上的应用,减少了DOM的操作,并且vue还用到了原生的方法,所以学好js高程很有必要. 一.如何利用vue阻止事件冒泡以及阻止事件的默认行为和了解什么是事件对象 在介绍事件冒泡之前,我们来了解一下事件,在上篇博客中我们知道事件的一般形式为

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

笔记-[2]-JS键盘事件.

键盘事件主要有两种: onkeydown:当键盘按下的时候触发 onkeyup:当键盘按键抬起的时候触发 例子: <script type="text/javascript"> window.onload=function(){ var oTxt=document.getElementById('txt'); oTxt.onkeyup=function(ev){ var ev=ev || window.event; if(ev.keyCode==13 &&

Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。

作者:827969653 在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 67 D <--------> 68 E <--------> 69 F <--------> 70 G <--------> 71 H <--------> 72 I <--------> 73 J <--