事件类型——常见的键盘事件及应用

news2025/4/7 13:32:15

事件类型——常见的键盘事件及应用

键盘事件是前端交互的重要组成部分，通过 keydown 和 keyup 可以精准监听用户的按键行为，结合 key 和 code 属性实现多样化的逻辑。在实际开发中，需根据场景选择合适的事件和属性，并注意兼容性和性能优化。

一、键盘事件基础：三种核心事件

1. keydown 事件

触发时机：

用户按下任意按键时触发（持续按住会重复触发）。

用途：

监听按键按下动作，常用于实时响应（如游戏控制、快捷键检测）。

示例：

<body>
	<input type="text" id="input">
	<script>  
	const input = document.getElementById('input');  
	input.addEventListener('keydown', (event) => {
	    console.log(`按下了 ${event.key} 键`);
	});
	</script>
</body>

2. keyup 事件

触发时机：

用户释放已按下的按键时触发。

用途：

监听按键释放动作，常用于处理最终输入（如搜索框输入完成后触发搜索）。

示例：

<body>
	<input type="text" id="searchInput">
	<script>
		const searchInput = document.getElementById('searchInput');
		searchInput.addEventListener('keyup', (event) => {
		    if (event.key === 'Enter') {
		          console.log('触发搜索');
		    }
		});
	</script>
</body>

3. keypress 事件（逐渐弃用，谨慎使用）

触发时机：

用户按下能产生字符的按键（如字母、数字，不包括功能键如 Shift、Enter）。

缺点：

兼容性差，且无法区分字符大小写（如 A 和 a 可能返回相同值），现代开发中推荐使用 keydown 或 keyup 替代。

二、事件对象属性：获取按键信息

1. key：按键的字符值（推荐使用）

返回用户输入的字符（如 ‘a’、‘1’、‘Enter’），受键盘布局和输入法影响。
示例：按下字母 A（小写键盘）返回 ‘a’，按下 Enter 返回 ‘Enter’。

2. code：按键的物理代码（推荐使用）

返回按键的物理位置代码（如 ‘KeyA’、‘Enter’），不受键盘布局和输入法影响，适合检测功能键（如 F1、方向键）。
示例：无论键盘布局如何，字母 A 对应的 code 始终是 ‘KeyA’，Enter 对应 ‘Enter’。

3. 过时属性：keyCode 和 which

keyCode 返回按键的 ASCII 码（如 A 是 65），但无法区分大小写和特殊字符，已被废弃。
现代开发中请使用 key 或 code。

三、实战示例：打造键盘操作反馈工具

需求：

创建一个输入框，实时显示用户按下和释放的按键信息（包括 key 和 code）。

步骤 1：HTML 结构

<!DOCTYPE html>
<html>
<head>
	<title>键盘事件实战</title>
</head>
<body>
	<input type="text" id="input" placeholder="输入内容...">
	<div id="log"></div>  
	<script src="script.js">
	</script>
</body>
</html>

步骤 2：JavaScript 逻辑（script.js）

const input = document.getElementById('input');
const log = document.getElementById('log');
// 监听按键按下事件
input.addEventListener('keydown', (event) => {
	log.innerHTML += `<div>按下：${event.key}（code: ${event.code}）</div>`;
});
// 监听按键释放事件
input.addEventListener('keyup', (event) => {
	log.innerHTML += `<div>释放：${event.key}（code: ${event.code}）</div>`;
});

效果：

输入框中每一次按键操作，都会在下方实时显示 key 和 code 的值。

四、进阶技巧：处理组合键和特殊功能

1. 检测组合键（如 Ctrl + C）

通过 event.ctrlKey、event.shiftKey、event.altKey 判断是否按下控制键：


input.addEventListener('keydown', (event) => {
	// 检测 Ctrl + C
	if (event.ctrlKey && event.key === 'c') {
	    console.log('触发复制操作');  
	}  
	// 检测 Shift + 字母（大写输入）  
	if (event.shiftKey && /[a-z]/.test(event.key)) {
	    console.log('输入大写字母');  
	}
});

2. 阻止默认行为（如禁止输入特殊字符）

通过 event.preventDefault() 阻止浏览器默认操作：

input.addEventListener('keydown', (event) => {
	// 禁止输入数字  
	if (/[0-9]/.test(event.key)) {
	    event.preventDefault(); // 阻止输入    
	    alert('不能输入数字！');  
	    }
});