纯CSS九宫格键盘首选display: grid，设grid-template-columns: repeat(3, 1fr)和grid-template-rows: repeat(4, 1fr)，按钮用<button>语义化元素，配合aspect-ratio: 1或padding-top: 100%保证正方形，min-width/min-height: 44px确保移动端点击可靠，@supports做渐进增强兼容老浏览器。
怎么用纯 HTML + CSS 实现九宫格键盘布局
纯靠 display: grid 就能稳住九宫格结构，不需要 JS 计算位置或动态生成 DOM。关键在 grid 容器的列数、行数和单元格对齐方式。
常见错误是用 float 或一堆 div + margin 拼，结果在不同屏幕下错位、按钮大小不一致、焦点顺序混乱。
- 容器设
display: grid，grid-template-columns: repeat(3, 1fr)，grid-template-rows: repeat(4, 1fr)（T9 通常 4 行：数字键 + 符号/切换行） - 每个按键用
button元素，语义正确、天然支持键盘导航和无障碍 - 避免固定像素宽高，用
min-height+aspect-ratio: 1保证正方形（现代浏览器支持，老版本 fallback 用padding-top: 100%配合绝对定位） - 禁用默认边框和背景：所有
button加border: none; background: none;，否则 iOS 会加灰色底纹
如何让 T9 键盘响应按键并映射字符
T9 的核心不是“按一次出一个字”，而是“按数字键多次循环选字”。但基础组件只需完成「按键 → 字符序列」的映射，选字逻辑应由上层业务控制。
别在键盘组件里硬编码拼音或词库——那不是键盘的事，是输入法引擎的职责。
立即学习“前端免费学习笔记（深入）”；
- 每个
button设data-key="2"和data-labels="abc"，用 dataset 读取比 class 名更清晰 - 监听
click和keydown（支持空格/回车触发），统一调用handleKey(key: string) - 不要直接拼接字符串：传出去的应是原始按键事件，比如用户连按三次
2，组件只通知 “2 pressed”，不自动转成"c"—— 防止与长按、语音、剪贴板等输入方式冲突 - 若需视觉反馈，用
:active或 JS 切换aria-pressed，别改innerHTML动态变文字
为什么移动端点击区域经常失灵或误触
iOS Safari 和部分安卓 WebView 对 button 的点击区域有最小尺寸要求（约 44×44px），且默认忽略 touchstart 上的 preventDefault，导致伪元素遮挡或缩放失效。
- 给每个
button加min-width: 44px; min-height: 44px;，配合font-size: 16px确保可点击 - 移除所有
user-select: none（它会阻止 iOS 的 tap 延迟优化） - 避免在
button内套div或span做点击代理——直接绑在button上 - 测试真机：Chrome DevTools 的模拟触摸不等于真实 touchend 触发时机，尤其在快速连按时
怎么兼容老浏览器又不写两套代码
IE11 不支持 grid-template-rows: repeat(4, 1fr)，但支持 grid 基本语法；Android 4.4 WebView 不支持 aspect-ratio，但能用 padding-top 技巧。
- 用
@supports (display: grid)包裹 grid 布局，fallback 用inline-block+width: 33.33%（注意去除 inline-block 默认间隙） - 字符映射逻辑完全不依赖 CSS，JS 层保持一致
- 不检测 UA，只检测特性：比如
'onbeforeinput' in window判断是否支持原生输入事件，而非判断是不是 Chrome - 如果项目必须支持 IE11，放弃
grid-template-areas和gap，改用grid-column/grid-row显式定位
真正难的不是画出九个格子，而是让每次点击都落在预期位置、每次连按都被准确计数、每次屏幕缩放后仍可操作——这些细节藏在 button 的最小尺寸、事件监听的粒度、以及数据流向的设计里。
