Angular CDK Keycodes基于源码的键盘键码常量与修饰键检测完整指南【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本文是围绕 Angular CDKkeycodes模块的实战与源码解析指南核心素材取自 goldens/cdk/keycodes/index.api.md由 API Extractor 生成的angular/cdk_keycodes官方 API 报告及 src/cdk/keycodes 下的实现源码。读完本文你将掌握angular/cdk/keycodes提供哪些键码常量、为什么在 Angular 组件开发中应优先使用这些常量而非魔法数字、hasModifierKey修饰键检测函数的确切语义以及这些能力在 chips、datepicker、listbox 等真实组件中的落地方式。一、模块概览angular/cdk/keycodes是什么keycodes是 Angular CDKComponent Dev Kit中一个轻量的公共 API 模块用于集中提供常用键盘键码常量与修饰键检测工具函数。从 API 报告可见angular/cdk_keycodes的公开导出全部为public级别即面向所有使用者稳定开放整个模块对外暴露的内容为100 个keyCode数值常量如ENTER 13、TAB 9、UP_ARROW 381 个类型定义ModifierKey修饰键联合类型1 个函数hasModifierKey()判断事件中是否按下指定修饰键。在 Angular Material 内部该模块被大量组件直接依赖例如 autocomplete-trigger.ts、chip-input.ts、datepicker-base.ts、menu.ts 等 40 个文件都从angular/cdk/keycodes导入常量。这也解释了 BUILD.bazel 中的一条关键注释keycodes 必须使用ng_project构建以便生成元数据因为这些常量会被静态用于组件/指令的元数据如 chipsNGC 需要在编译期就能求值见 BUILD.bazel。二、键码常量全集分类与数值对照所有常量定义在 keycodes.ts以下按功能分类整理完整覆盖 API 报告中的每一个public导出。1. 控制键Control Keys常量值常量值MAC_ENTER3BACKSPACE8TAB9NUM_CENTER12ENTER13SHIFT16CONTROL17ALT18PAUSE19CAPS_LOCK20ESCAPE27SPACE32PAGE_UP33PAGE_DOWN34END35HOME36PRINT_SCREEN44INSERT45DELETE46SCROLL_LOCK145NUM_LOCK1442. 方向键Arrow Keys常量值LEFT_ARROW37UP_ARROW38RIGHT_ARROW39DOWN_ARROW403. 字母键A–Z与主键盘数字键0–9字母键A–Z取值 65–90ASCII 码例如A 65、Z 90数字键ZERO–NINE取值 48–57例如ZERO 48、ONE 49、NINE 57。注意在 Windows/Linux 上方向键LEFT_ARROW等与NUM_CENTER 12一样都是标准的keyCode语义但字母键的数值同时等价于对应 ASCII 码。4. 符号与标点键Symbols常量值备注PLUS_SIGN43QUESTION_MARK63AT_SIGN64FF_SEMICOLON59Firefox 分号替代值FF_EQUALS61Firefox 等号替代值SEMICOLON186EQUALS187COMMA188DASH189PERIOD190SLASH191APOSTROPHE/TILDE192OPEN_SQUARE_BRACKET219BACKSLASH220CLOSE_SQUARE_BRACKET221SINGLE_QUOTE2225. 数字小键盘NumpadNUMPAD_ZERO–NUMPAD_NINE取值 96–105NUMPAD_MULTIPLY106、NUMPAD_PLUS107、NUMPAD_MINUS109、NUMPAD_PERIOD110、NUMPAD_DIVIDE111。6. 功能键 F1–F12F1–F12取值 112–123。7. 修饰键与平台相关键Modifier Platform常量值说明META91Windows 键 / 左侧 CommandMAC_WK_CMD_LEFT91Mac WebKit 左 CmdMAC_WK_CMD_RIGHT93Mac WebKit 右 CmdCONTEXT_MENU93右键菜单键MAC_META224Mac 上 Meta 键不同取值SHIFT/CONTROL/ALT16 / 17 / 18对应event.shiftKey等8. 媒体键Media Keys与 Firefox 兼容常量FIRST_MEDIA166、LAST_MEDIA183MUTE173、VOLUME_DOWN174、VOLUME_UP175Firefox 专用替代值FF_MINUS173、FF_MUTE181、FF_VOLUME_DOWN182、FF_VOLUME_UP183。关键设计意图源码注释直接佐证keycodes.ts 中多处标注了 FirefoxGecko与标准keyCode的差异例如export const FF_SEMICOLON 59; // Firefox (Gecko) fires this for semicolon instead of 186 export const FF_EQUALS 61; // Firefox (Gecko) fires this for equals instead of 187 export const MUTE 173; // Firefox (Gecko) fires 181 for MUTE export const VOLUME_DOWN 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN export const SEMICOLON 186; // Firefox (Gecko) fires 59 for SEMICOLON export const DASH 189; // Firefox (Gecko) fires 173 for DASH/MINUS即同一物理按键在 Firefox 与 Chrome/Safari 上可能产生不同keyCode。模块同时导出标准值与FF_*替代值正是为了帮助开发者处理这种跨浏览器差异——这也是官方指南keycodes.md将本模块定位为 Commonly used keycode constants 的深层原因。三、ModifierKey类型与hasModifierKey函数API 报告给出了两个核心公开 API// public export type ModifierKey altKey | shiftKey | ctrlKey | metaKey; // public export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean;实现位于 modifiers.tsexport type ModifierKey altKey | shiftKey | ctrlKey | metaKey; export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean { if (modifiers.length) { return modifiers.some(modifier event[modifier]); } return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey; }语义一不传修饰键参数时——检测任意修饰键当调用hasModifierKey(event)且不传任何修饰键时函数返回四个修饰键的“或”结果只要 Alt / Shift / Ctrl / MetaCmd/Win中任一被按下即为true。这在需要阻止用户按下组合键时的默认行为场景非常有用例如避免在按下CtrlC复制文本时触发组件自身的快捷键逻辑。语义二传入修饰键参数时——检测任一指定修饰键hasModifierKey(event, altKey, shiftKey)使用Array.prototype.some只要事件中任一指定修饰键为按下状态即返回true。注意event[modifier]的索引访问方式使其天然支持ctrlKey、metaKey等全部四种取值。语义三可传多个修饰键——实现组合快捷键可以传多个修饰键实现Ctrl/Alt 任意其一的检测这在跨平台兼容上非常实用Mac 用户使用 MetaWindows/Linux 用户使用 Ctrl两者都可命中同一分支。四、单元测试验证的完整行为矩阵modifiers.spec.ts 用 6 个用例锁定了上述全部语义测试用例断言内容alt / shift / meta / ctrl 分别按下hasModifierKey(event)为true未按下为false指定单个修饰键事件含 control 时hasModifierKey(ctrlEvent, altKey)为false指定多个修饰键事件含 controlalt 时hasModifierKey(ctrlAltEvent, altKey)为true组合多修饰键检测事件含 controlaltshift 时hasModifierKey(ctrlAltEvent, altKey, shiftKey)为true测试通过createKeyboardEvent(keydown, 0, , {alt: true})构造带修饰键的键盘事件来自 src/cdk/testing/private证明该函数既适用于真实 DOM 事件也适用于测试环境中的合成事件。同时BUILD.bazel 定义了unit_test_sources与ng_web_test_suite目标可通过 Bazel 运行//src/cdk/keycodes:unit_tests验证。五、实战用法官方示例与真实组件源码5.1 官方入门示例来自 keycodes.mdkeycodes.md 给出了一个统计方向键次数的指令示例原文完整保留并修正了原文档中两处笔误host前缺少逗号、arrowPresscount拼写不一致import {Directive} from angular/core; import {UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW} from angular/cdk/keycodes; Directive({ selector: [count-arrows], host: { (keypress): handleKeyPress($event) } }) export class ArrowCounterDirective { arrowPressCount 0; handleKeyPress(event: KeyboardEvent) { if ([UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW].includes(event.keyCode)) { this.arrowPressCount; } } }要点通过angular/cdk/keycodes命名常量替代魔法数字代码可读性与可维护性显著提升方向键常量数组配合Array.includes做一次性命中判断。5.2 真实组件应用一Material chips 的 Backspace 与 Enter 处理chip-input.ts 展示了空输入框按 Backspace 删除最后一个 chip的交互if (this.empty event.keyCode BACKSPACE) { ... }同时该组件还结合hasModifierKey决定何时忽略 Enter 提交!hasModifierKey(event)与hasModifierKey(event, ...modifiers)两种分支见 chip-input.ts并导入了ModifierKey类型用于类型安全地声明可配置的修饰键列表。5.3 真实组件应用二CDK listbox 的 Ctrl/Shift 多选快捷键listbox.ts 中通过组合keyCode常量与hasModifierKey实现标准桌面多选交互if (this.multiple keyCode A hasModifierKey(event, ...ctrlKeys))L726——Ctrl/Command A 全选hasModifierKey(event, shiftKey)L741——Shift 方向键扩展选区多个组合键分支L758-L759、L779-L780分别处理 Shift、Ctrl/Command 加方向键的复杂选区逻辑。其中ctrlKeys通常被定义为[ModifierKey]数组如[ctrlKey, metaKey]这样一套代码同时兼容 MacMeta与 Windows/LinuxCtrl——这正是hasModifierKey多参数设计的主要用途。六、在项目中使用angular/cdk/keycodes安装与导入本仓库为 Angular CDK / Angular Material 的源码仓库monorepokeycodes是angular/cdk包下的子入口。在业务项目中安装 CDK 后即可导入import {ENTER, TAB, hasModifierKey, ModifierKey} from angular/cdk/keycodes;常见使用模式小结场景推荐写法判断按下 Enterevent.keyCode ENTER判断任意修饰键被按下hasModifierKey(event)判断指定修饰键被按下hasModifierKey(event, shiftKey)判断任一组合修饰键hasModifierKey(event, ctrlKey, metaKey)避免在输入法/组合键时误触发!hasModifierKey(event)作为前置条件多选组件的 Ctrl/Command 快捷键keyCode A hasModifierKey(event, ...ctrlKeys)七、兼容性注意事项keyCode已被标记为 legacyKeyboardEvent.keyCode属于已被废弃的 DOM 属性angular/cdk/keycodes的常量围绕keyCode设计。在 Angular 组件生态中仍被广泛使用本仓库 40 文件依赖但新代码也可结合event.key如ArrowUp使用本文不评判其去留仅如实说明CDK 目前仍以keyCode常量为公开 API 并提供跨浏览器兼容常量。跨浏览器差异处理分号、等号、减号、静音、音量等按键时建议同时检查标准常量与FF_*替代常量参见第二节第 8 组。组合键的平台差异Mac 上组合快捷键应检测metaKeyWindows/Linux 应检测ctrlKey推荐通过数组一次传入两种修饰键。测试友好hasModifierKey接收标准KeyboardEvent在 Karma/Jasmine 等测试环境中可用createKeyboardEvent合成事件直接验证见 modifiers.spec.ts。八、延伸阅读API 报告原文goldens/cdk/keycodes/index.api.md全部常量定义src/cdk/keycodes/keycodes.ts修饰键类型与函数src/cdk/keycodes/modifiers.ts官方入门指南src/cdk/keycodes/keycodes.md单元测试src/cdk/keycodes/modifiers.spec.ts模块出口src/cdk/keycodes/public-api.ts 与 src/cdk/keycodes/index.ts构建配置src/cdk/keycodes/BUILD.bazel【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 9:47:20 · 阅读 1.2k Angular CDK Keycodes：基于源码的键盘键码常量与修饰键检测完整指南
Angular CDK Keycodes基于源码的键盘键码常量与修饰键检测完整指南【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本文是围绕 Angular CDKkeycodes模块的实战与源码解析指南核心素材取自 goldens/cdk/keycodes/index.api.md由 API Extractor 生成的angular/cdk_keycodes官方 API 报告及 src/cdk/keycodes 下的实现源码。读完本文你将掌握angular/cdk/keycodes提供哪些键码常量、为什么在 Angular 组件开发中应优先使用这些常量而非魔法数字、hasModifierKey修饰键检测函数的确切语义以及这些能力在 chips、datepicker、listbox 等真实组件中的落地方式。一、模块概览angular/cdk/keycodes是什么keycodes是 Angular CDKComponent Dev Kit中一个轻量的公共 API 模块用于集中提供常用键盘键码常量与修饰键检测工具函数。从 API 报告可见angular/cdk_keycodes的公开导出全部为public级别即面向所有使用者稳定开放整个模块对外暴露的内容为100 个keyCode数值常量如ENTER 13、TAB 9、UP_ARROW 381 个类型定义ModifierKey修饰键联合类型1 个函数hasModifierKey()判断事件中是否按下指定修饰键。在 Angular Material 内部该模块被大量组件直接依赖例如 autocomplete-trigger.ts、chip-input.ts、datepicker-base.ts、menu.ts 等 40 个文件都从angular/cdk/keycodes导入常量。这也解释了 BUILD.bazel 中的一条关键注释keycodes 必须使用ng_project构建以便生成元数据因为这些常量会被静态用于组件/指令的元数据如 chipsNGC 需要在编译期就能求值见 BUILD.bazel。二、键码常量全集分类与数值对照所有常量定义在 keycodes.ts以下按功能分类整理完整覆盖 API 报告中的每一个public导出。1. 控制键Control Keys常量值常量值MAC_ENTER3BACKSPACE8TAB9NUM_CENTER12ENTER13SHIFT16CONTROL17ALT18PAUSE19CAPS_LOCK20ESCAPE27SPACE32PAGE_UP33PAGE_DOWN34END35HOME36PRINT_SCREEN44INSERT45DELETE46SCROLL_LOCK145NUM_LOCK1442. 方向键Arrow Keys常量值LEFT_ARROW37UP_ARROW38RIGHT_ARROW39DOWN_ARROW403. 字母键A–Z与主键盘数字键0–9字母键A–Z取值 65–90ASCII 码例如A 65、Z 90数字键ZERO–NINE取值 48–57例如ZERO 48、ONE 49、NINE 57。注意在 Windows/Linux 上方向键LEFT_ARROW等与NUM_CENTER 12一样都是标准的keyCode语义但字母键的数值同时等价于对应 ASCII 码。4. 符号与标点键Symbols常量值备注PLUS_SIGN43QUESTION_MARK63AT_SIGN64FF_SEMICOLON59Firefox 分号替代值FF_EQUALS61Firefox 等号替代值SEMICOLON186EQUALS187COMMA188DASH189PERIOD190SLASH191APOSTROPHE/TILDE192OPEN_SQUARE_BRACKET219BACKSLASH220CLOSE_SQUARE_BRACKET221SINGLE_QUOTE2225. 数字小键盘NumpadNUMPAD_ZERO–NUMPAD_NINE取值 96–105NUMPAD_MULTIPLY106、NUMPAD_PLUS107、NUMPAD_MINUS109、NUMPAD_PERIOD110、NUMPAD_DIVIDE111。6. 功能键 F1–F12F1–F12取值 112–123。7. 修饰键与平台相关键Modifier Platform常量值说明META91Windows 键 / 左侧 CommandMAC_WK_CMD_LEFT91Mac WebKit 左 CmdMAC_WK_CMD_RIGHT93Mac WebKit 右 CmdCONTEXT_MENU93右键菜单键MAC_META224Mac 上 Meta 键不同取值SHIFT/CONTROL/ALT16 / 17 / 18对应event.shiftKey等8. 媒体键Media Keys与 Firefox 兼容常量FIRST_MEDIA166、LAST_MEDIA183MUTE173、VOLUME_DOWN174、VOLUME_UP175Firefox 专用替代值FF_MINUS173、FF_MUTE181、FF_VOLUME_DOWN182、FF_VOLUME_UP183。关键设计意图源码注释直接佐证keycodes.ts 中多处标注了 FirefoxGecko与标准keyCode的差异例如export const FF_SEMICOLON 59; // Firefox (Gecko) fires this for semicolon instead of 186 export const FF_EQUALS 61; // Firefox (Gecko) fires this for equals instead of 187 export const MUTE 173; // Firefox (Gecko) fires 181 for MUTE export const VOLUME_DOWN 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN export const SEMICOLON 186; // Firefox (Gecko) fires 59 for SEMICOLON export const DASH 189; // Firefox (Gecko) fires 173 for DASH/MINUS即同一物理按键在 Firefox 与 Chrome/Safari 上可能产生不同keyCode。模块同时导出标准值与FF_*替代值正是为了帮助开发者处理这种跨浏览器差异——这也是官方指南keycodes.md将本模块定位为 Commonly used keycode constants 的深层原因。三、ModifierKey类型与hasModifierKey函数API 报告给出了两个核心公开 API// public export type ModifierKey altKey | shiftKey | ctrlKey | metaKey; // public export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean;实现位于 modifiers.tsexport type ModifierKey altKey | shiftKey | ctrlKey | metaKey; export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean { if (modifiers.length) { return modifiers.some(modifier event[modifier]); } return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey; }语义一不传修饰键参数时——检测任意修饰键当调用hasModifierKey(event)且不传任何修饰键时函数返回四个修饰键的“或”结果只要 Alt / Shift / Ctrl / MetaCmd/Win中任一被按下即为true。这在需要阻止用户按下组合键时的默认行为场景非常有用例如避免在按下CtrlC复制文本时触发组件自身的快捷键逻辑。语义二传入修饰键参数时——检测任一指定修饰键hasModifierKey(event, altKey, shiftKey)使用Array.prototype.some只要事件中任一指定修饰键为按下状态即返回true。注意event[modifier]的索引访问方式使其天然支持ctrlKey、metaKey等全部四种取值。语义三可传多个修饰键——实现组合快捷键可以传多个修饰键实现Ctrl/Alt 任意其一的检测这在跨平台兼容上非常实用Mac 用户使用 MetaWindows/Linux 用户使用 Ctrl两者都可命中同一分支。四、单元测试验证的完整行为矩阵modifiers.spec.ts 用 6 个用例锁定了上述全部语义测试用例断言内容alt / shift / meta / ctrl 分别按下hasModifierKey(event)为true未按下为false指定单个修饰键事件含 control 时hasModifierKey(ctrlEvent, altKey)为false指定多个修饰键事件含 controlalt 时hasModifierKey(ctrlAltEvent, altKey)为true组合多修饰键检测事件含 controlaltshift 时hasModifierKey(ctrlAltEvent, altKey, shiftKey)为true测试通过createKeyboardEvent(keydown, 0, , {alt: true})构造带修饰键的键盘事件来自 src/cdk/testing/private证明该函数既适用于真实 DOM 事件也适用于测试环境中的合成事件。同时BUILD.bazel 定义了unit_test_sources与ng_web_test_suite目标可通过 Bazel 运行//src/cdk/keycodes:unit_tests验证。五、实战用法官方示例与真实组件源码5.1 官方入门示例来自 keycodes.mdkeycodes.md 给出了一个统计方向键次数的指令示例原文完整保留并修正了原文档中两处笔误host前缺少逗号、arrowPresscount拼写不一致import {Directive} from angular/core; import {UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW} from angular/cdk/keycodes; Directive({ selector: [count-arrows], host: { (keypress): handleKeyPress($event) } }) export class ArrowCounterDirective { arrowPressCount 0; handleKeyPress(event: KeyboardEvent) { if ([UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW].includes(event.keyCode)) { this.arrowPressCount; } } }要点通过angular/cdk/keycodes命名常量替代魔法数字代码可读性与可维护性显著提升方向键常量数组配合Array.includes做一次性命中判断。5.2 真实组件应用一Material chips 的 Backspace 与 Enter 处理chip-input.ts 展示了空输入框按 Backspace 删除最后一个 chip的交互if (this.empty event.keyCode BACKSPACE) { ... }同时该组件还结合hasModifierKey决定何时忽略 Enter 提交!hasModifierKey(event)与hasModifierKey(event, ...modifiers)两种分支见 chip-input.ts并导入了ModifierKey类型用于类型安全地声明可配置的修饰键列表。5.3 真实组件应用二CDK listbox 的 Ctrl/Shift 多选快捷键listbox.ts 中通过组合keyCode常量与hasModifierKey实现标准桌面多选交互if (this.multiple keyCode A hasModifierKey(event, ...ctrlKeys))L726——Ctrl/Command A 全选hasModifierKey(event, shiftKey)L741——Shift 方向键扩展选区多个组合键分支L758-L759、L779-L780分别处理 Shift、Ctrl/Command 加方向键的复杂选区逻辑。其中ctrlKeys通常被定义为[ModifierKey]数组如[ctrlKey, metaKey]这样一套代码同时兼容 MacMeta与 Windows/LinuxCtrl——这正是hasModifierKey多参数设计的主要用途。六、在项目中使用angular/cdk/keycodes安装与导入本仓库为 Angular CDK / Angular Material 的源码仓库monorepokeycodes是angular/cdk包下的子入口。在业务项目中安装 CDK 后即可导入import {ENTER, TAB, hasModifierKey, ModifierKey} from angular/cdk/keycodes;常见使用模式小结场景推荐写法判断按下 Enterevent.keyCode ENTER判断任意修饰键被按下hasModifierKey(event)判断指定修饰键被按下hasModifierKey(event, shiftKey)判断任一组合修饰键hasModifierKey(event, ctrlKey, metaKey)避免在输入法/组合键时误触发!hasModifierKey(event)作为前置条件多选组件的 Ctrl/Command 快捷键keyCode A hasModifierKey(event, ...ctrlKeys)七、兼容性注意事项keyCode已被标记为 legacyKeyboardEvent.keyCode属于已被废弃的 DOM 属性angular/cdk/keycodes的常量围绕keyCode设计。在 Angular 组件生态中仍被广泛使用本仓库 40 文件依赖但新代码也可结合event.key如ArrowUp使用本文不评判其去留仅如实说明CDK 目前仍以keyCode常量为公开 API 并提供跨浏览器兼容常量。跨浏览器差异处理分号、等号、减号、静音、音量等按键时建议同时检查标准常量与FF_*替代常量参见第二节第 8 组。组合键的平台差异Mac 上组合快捷键应检测metaKeyWindows/Linux 应检测ctrlKey推荐通过数组一次传入两种修饰键。测试友好hasModifierKey接收标准KeyboardEvent在 Karma/Jasmine 等测试环境中可用createKeyboardEvent合成事件直接验证见 modifiers.spec.ts。八、延伸阅读API 报告原文goldens/cdk/keycodes/index.api.md全部常量定义src/cdk/keycodes/keycodes.ts修饰键类型与函数src/cdk/keycodes/modifiers.ts官方入门指南src/cdk/keycodes/keycodes.md单元测试src/cdk/keycodes/modifiers.spec.ts模块出口src/cdk/keycodes/public-api.ts 与 src/cdk/keycodes/index.ts构建配置src/cdk/keycodes/BUILD.bazel【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考