JS 事件 —— 键盘事件

最新推荐文章于 2023-09-25 19:58:54 发布

白菜执笔人

最新推荐文章于 2023-09-25 19:58:54 发布

阅读量287

点赞数

分类专栏： Web 前端基础

本文链接：https://blog.csdn.net/qq_43621629/article/details/102725341

版权

Web 前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web前端基础学习笔记

一、JS 键盘事件

1.1、按下字符键触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS 键盘事件</title>
	<script type="text/javascript">
		window.onload = function(){
			// 按下字符键触发（字母、数字、符号等，F1、shift 这些不行）
			document.onkeypress = function(){
				console.log("KeyPress");
			}
		}
	</script>
</head>
<body>

1.2、按下任意键触发事件

	<script type="text/javascript">
		window.onload = function(){
			// 按下任意键触发事件
			document.onkeydown = function(){
				console.log("KeyDown");
			}
		}
	</script>

1.3、键盘弹起触发事件

	<script type="text/javascript">
		window.onload = function(){
			// 键盘弹起触发事件
			document.onkeyup = function(){
				console.log("KeyUp");
			}
		}
	</script>

1.4、快捷键触发

	<script type="text/javascript">
		window.onload = function(){
			// 快捷键触发  ——>  返回布尔值, 按下的返回 true
			document.onkeydown = function(e){
				console.log(e.altKey,e.shiftKey,e.ctrlKey);				// 显示返回布尔值的顺序(自定义)
				console.log(e.keyCode);									// 返回按下键(任意键)的值
			}
		}
	</script>

在这里插入图片描述

可以每个事件单独观察、几个事件一起观察，对比效果，以促进理解。

白菜执笔人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 事件 —— 键盘事件

Web前端基础学习笔记一、JS 键盘事件1.1、按下字符键触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS 键盘事件</title> <script type="text/javascript">...
复制链接

扫一扫