---
id: "keyboard"
title: "键盘、焦点与语义"
category: "可用性"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-keyboard"
source_data: "../component-data.json"
official_components: []
template_components: []
scenario_count: 6
verification: "scenario-checklist-not-full-test-pass"
---

# 键盘、焦点与语义

专题 `keyboard` · 可用性 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：默认让真实控件遵循自身的键盘操作与焦点规则；本页键帽仅作静态说明，不提供另一套组件样式。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 操作方式 | 鼠标与键盘是输入方式，焦点提示帮助用户知道当前位置。 | 用制表键导航、回车或空格执行、退出键关闭；具体按键按真实组件能力定义。 |
| 控件形状 | 输入框和无框操作使用不同焦点表达，是组件规则。 | 输入/选择框只改变自身边框，按钮和链接保留键盘焦点轮廓，不能让用户选择是否隐藏焦点。 |
| 自动语义 | 焦点、选中、展开、禁用和错误分别代表真实状态。 | 控件操作后同步可见状态与辅助技术标识；键盘定位不自动等于选择或提交。 |

使用边界：键盘焦点不是可选主题，也不等于业务选中；静态键帽不代表当前页包含所有可操作控件。

## 组件规则

- **KEYBOARD-R01**：交互元素按视觉顺序 制表键 导航；按钮支持 回车键 / 空格键，选择组件遵循相应键盘模式。不得用正数焦点顺序属性（tabindex）强行插队。
- **KEYBOARD-R02**：键盘焦点必须可见：输入/下拉/日期框以自身边框变蓝作为替代；其他无边框操作保留焦点轮廓，不被固定区域遮住。弹窗关闭回焦点，内容更新不随意抢焦点。
- **KEYBOARD-R03**：使用按钮（button）、输入框（input）、标签（label）、表格（table）等正确语义元素；aria-expanded（展开）、aria-checked（勾选）、aria-invalid（校验失败）、aria-busy（正在处理）与可见状态一致。
- **KEYBOARD-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **KEYBOARD-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **KEYBOARD-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **KEYBOARD-R07**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。
- **KEYBOARD-R08**：【输入与选择触发框】键盘进入时只将现有边框改为主题蓝；输入错误仍保持错误红，不增加外圈或阴影。
- **KEYBOARD-R09**：【按钮与无框动作】普通按钮、链接和图标使用操作蓝键盘焦点轮廓；危险文字动作复用按钮专题的红色焦点提示。焦点保留原按钮层级和文字语义，不因键盘定位改变动作类型。
- **KEYBOARD-R10**：【候选项定位】列表中的键盘定位使用浅灰背景；已选择项按自身组件显示，不能用定位高亮冒充提交选择。
- **KEYBOARD-R11**：【不可交互内容】禁用入口阻止执行；静态文字不因键盘经过变蓝。焦点返回正确入口，不创造新的颜色级别。
- **KEYBOARD-R12**：【组件边界】键盘聚焦不等于选中；纯说明与装饰内容不添加伪焦点。此专题只定义焦点角色，具体变化以组件为准。
- **KEYBOARD-R13**：必填和错误语义必须落到实际控件：标签与错误提示关联稳定ID；组合选择的必填属于整组，不能让每个复选项、筛选关键词或上传按钮都变成必填。切换状态后同步更新，保留明确选填的字段。
- **KEYBOARD-R14**：同一滑块手柄仅保留一个Tab停靠点，范围滑块分别说明起点/终点及当前值；色板入口支持Enter/空格打开，退出后回到入口；评分控件有明确名称。非文本控件保留可见键盘焦点。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **KEYBOARD-S01**：本页为键盘操作静态指南，按键图用于说明。关联验收：到“按钮层级与状态”“输入框与只读、禁用”“单选、复选与半选”“单选下拉与选项状态”“对话框：标题、滚动与焦点”专题，用真实控件逐项检查键盘路径。
- [ ] **KEYBOARD-S02**：接入验收：Tab（制表键）向后导航，Shift+Tab（上档键+制表键）向前导航；Enter（回车键）或空格键执行，方向键定位，Esc（退出键）关闭，按组件真实语义定义。
- [ ] **KEYBOARD-S03**：输入框以原边框表现焦点；按钮、链接、图标保留键盘焦点轮廓。焦点不被固定区域遮住，关闭弹层返回触发入口。
- [ ] **KEYBOARD-S04**：无障碍属性使用真实标识：aria-expanded、aria-checked、aria-invalid、aria-busy，分别与展开、勾选、校验和等待状态同步。
- [ ] **KEYBOARD-S05**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。
- [ ] **KEYBOARD-S06**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。

### 专题验收重点

关联验收：在对应组件专题用键盘完成进入、执行、退出和恢复的操作路径，检查焦点可见且无陷阱或丢失；本页按键图不作为交互通过证据。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<div class="keyboard-path">
<kbd>Tab（制表键）</kbd>
<span>移动焦点</span>
<kbd>Enter（回车键）</kbd>
<span>执行</span>
<kbd>Esc（退出键）</kbd>
<span>关闭</span>
</div>
<p class="help">本页按键图为静态说明。请到<a href="#spec-buttons">按钮</a>、<a href="#spec-input">输入框</a>、<a href="#spec-checks">单选与复选</a>、<a href="#spec-select">下拉选择</a>和<a href="#spec-dialog">对话框</a>专题检查真实控件的键盘路径。</p>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：W3C WCAG 2.2；本次补充。
- [打开本专题页面](../index.html#spec-keyboard)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`keyboard`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 输入与选择触发框 | 键盘进入时只将现有边框改为主题蓝；输入错误仍保持错误红，不增加外圈或阴影。 |
| 按钮与无框动作 | 普通按钮、链接和图标使用操作蓝键盘焦点轮廓；危险文字动作复用按钮专题的红色焦点提示。焦点保留原按钮层级和文字语义，不因键盘定位改变动作类型。 |
| 候选项定位 | 列表中的键盘定位使用浅灰背景；已选择项按自身组件显示，不能用定位高亮冒充提交选择。 |
| 不可交互内容 | 禁用入口阻止执行；静态文字不因键盘经过变蓝。焦点返回正确入口，不创造新的颜色级别。 |

键盘聚焦不等于选中；纯说明与装饰内容不添加伪焦点。此专题只定义焦点角色，具体变化以组件为准。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 筛选及行内操作的键盘焦点](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)