按键修饰符和系统修饰符基本内容

最新推荐文章于 2024-07-22 15:19:55 发布

xiao666yan

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量50

点赞数

文章标签：前端开发语言 vue.js

本文链接：https://blog.csdn.net/qq_51325652/article/details/130607971

版权

按键修饰符

keydown：键盘按键按下时触发
keyup:键盘按键抬起时触发
keypress:键盘按键按下与抬起间隔间触发

keyCode返回keypress事件触发的按键的减值的字符代码或keydown,keyup事件的键的代码

<template>
	<view id = "app">
		<label for = "name">姓名：</label>
		<input v-on:keyup = "name" type = "text" id ="name">
		<label for = "pass">密码：</label>
		<input v-on:keyup = "pass" type = "safe-password" id ="pass">
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			name: function() {
				console.log("正在输入姓名....")
			},
			pass: function() {
				console.log("正在输入密码....")
			}
		},
		computed: {
			
		}
	}
</script>

<style>
	
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DswmNDVf-1683717572711)(C:\Users\32069\AppData\Roaming\Typora\typora-user-images\image-20230510142813922.png)]

Vue提供了最常用的按键码的别名

enter
tab
delete
esc
up
'down
left
right

如为keyup事件添加enter按键码，当enter键抬起后，才会触发keyup事件

<input v-on:keyup.enter = "name" type = "text" id ="name">
		<label for = "pass">密码：</label>
		<input v-on:keyup.enter = "pass" type = "safe-password" id ="pass">

系统修饰符

用如下修饰符实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

ctrl
alt
shift
meta

在和keyup事件一起使用时，事件触发时修饰符必须处于按下状态，如ctrl c/v

<template>
	<view id = "app">
		<label for = "name">姓名：</label>
		<input v-on:keyup.ctrl.enter = "name" type = "text" id ="name">
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			name: function() {
				console.log("正在输入姓名....")
			}
		},
		computed: {
			
		}
	}
</script>

<style>
	
</style>

在浏览器中运行程序，在input输入内容后，需要按下ctrl键再按enter键才能触发keyup事件