当前位置：网站首页>9. Keyboard events

9. Keyboard events

2022-07-20 08:40:00 【Where the wind falls】

1. Key aliases commonly used in keyboards

1.Vue Key aliases commonly used in

enter ：enter

Delete ：delete

sign out ：esc

Space ：space

Change the number ：tab

On ：up

Next ：down

Left ：left

Right ：right

2.vue Key with no alias provided , You can use the original... Key key Value to bind , But be careful to turn to keyab-case（ short ）, Such as ：@keyup.page-down

3. System modifier （ Special usage ）：ctrl、alt、shift、meta

        （1） coordination keyup Use ： Colleagues who press the modifier key , Press another key , Then release the other keys , The event was

                  Trigger .

        （2） coordination keydown Use ： Normal trigger event

4. You can also use keyCode To specify specific keys （ Not recommended 、vue3 Has deleted ）

5.Vue.config.keycodes. Custom key name = Key code , You can customize the key alias 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title> Keyboard events </title>
		<!--  introduce Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue Key aliases commonly used in ：
							 enter  => enter
							 Delete  => delete ( Capture “ Delete ” and “ Backspace ” key )
							 sign out  => esc
							 Space  => space
							 Line break  => tab ( special , Must cooperate keydown To use the )
							 On  => up
							 Next  => down
							 Left  => left
							 Right  => right

				2.Vue Key with no alias provided , You can use the original... Key key Value to bind , But be careful to turn to kebab-case（ The dash names ）

				3. System modifier keys （ Special usage ）：ctrl、alt、shift、meta
							(1). coordination keyup Use ： While pressing the modifier key , Press another key , Then release the other keys , The event was triggered .
							(2). coordination keydown Use ： Normal trigger event .

				4. You can also use keyCode To specify specific keys （ Not recommended ）

				5.Vue.config.keyCodes. Custom key name  =  Key code , You can customize the key alias 
		-->
		<!--  Prepare a container -->
		<div id="root">
			<h2> Welcome to {
   {name}} Study </h2>
			<input type="text" placeholder=" Press enter to prompt for " @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .
		Vue.config.keyCodes.huiche = 13 // Defines an alias key 

		new Vue({
			el:'#root',
			data:{
				name:' Silicon Valley '
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

原网站

版权声明
本文为[Where the wind falls]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190503370449.html

边栏推荐

猜你喜欢

随机推荐