把键盘测试嵌进你的网站

一段 iframe 即可：访客按下按键，组件实时高亮并显示键名与 KeyboardEvent.code。没有第三方脚本、没有外部请求，也不收集输入内容。

嵌入代码

<iframe src="https://www.key365.cn/embed.html"
        width="420" height="220"
        title="键盘测试 · 键"
        style="border:0;max-width:100%"
        loading="lazy"></iframe>

最小可用尺寸 300 × 180，推荐 420 × 220；组件按容器尺寸自适应，不出现滚动条。深色主题可留空跟随系统，也可以由父页面指定（见下）。

为什么要点一下组件

浏览器只把键盘事件交给已聚焦的 iframe。访客没点组件时，按键全部归你的页面，组件收不到 —— 这是浏览器安全策略，不是组件坏了。组件中央那枚「点击开始按键」就是提示访客先点一下；点过之后（或页面失焦后重新点）就能正常记录与高亮。

如果你希望访客不点击也能记录，把父页面的按键转发进来即可：

<script>
function forward(e, down) {
  iframe.contentWindow.postMessage(
    { type: 'key', down: down, key: e.key, code: e.code },
    'https://www.key365.cn'
  );
}
document.addEventListener('keydown', function (e) { forward(e, true); });
document.addEventListener('keyup',   function (e) { forward(e, false); });
</script>

⚠️ 转发会拿到访客在你页面上的全部按键，页面里有输入框时不要直接开，至少先过滤 e.target 是不是输入控件。

postMessage 接口

<script>
// 主题：light / dark
iframe.contentWindow.postMessage(
  { type: 'setTheme', theme: 'dark' },
  'https://www.key365.cn'
);

// 按键事件：只含键名与 code，不含输入文本
window.addEventListener('message', function (e) {
  if (e.data && e.data.source === 'kb-embed') console.log(e.data);
});
</script>

组件向外发送 { source: 'kb-embed', type: 'ready' | 'keydown' | 'keyup', key, code }。统计请在你自己的页面侧监听，组件本身不加载任何统计脚本。