NexDot Braille Input

面向移动网页的无障碍盲文输入 Web Component。它不依赖 React、Vue 或其他前端框架， 可关联原生 input / textarea，并向宿主页面派发标准 beforeinput、input 事件。

在线演示：https://nexdotteam.github.io/Package/

当前版本包含：

• 国家通用盲文声母、韵母到中文拼音的完整映射；
• 基于 librime WASM 的简体中文候选词、组词和本地词频学习；
• 六点英文盲文；
• 显式数字模式（a-j 点型映射为 1-0，无需先输入数字符号）；
• Unicode 盲文原样输入；
• 对 VoiceOver / TalkBack 友好的点位开关、状态播报、焦点管理；
• 移动端两组三指快速触摸模式；
• 可插拔英文与中文输入引擎接口；
• Shadow DOM 样式隔离和 CSS 变量主题。

安装

npm install @nexdot/braille-input

import "@nexdot/braille-input";

<label for="message">内容</label>
<textarea id="message"></textarea>
<nexdot-braille-input
  for="message"
  mode="chinese"
  rime-base-url="/nexdot-rime"
></nexdot-braille-input>

把随包提供的 Rime 资源复制到网站的静态资源目录：

cp -R node_modules/@nexdot/braille-input/dist/rime public/nexdot-rime

若不设置 rime-base-url，组件默认从 jsDelivr 加载同版本的公开 Rime 运行时和词库。输入、候选计算与词频学习仍全部发生在浏览器本地，不会把输入内容发送到服务端。

触发按钮默认采用“视觉隐藏、读屏可读、键盘聚焦时可见”的无障碍跳转链接模式。需要 同时给所有人显示按钮时：

<nexdot-braille-input
  for="message"
  trigger-visibility="visible"
  label="使用盲文输入"
></nexdot-braille-input>

模式

<!-- 国家通用盲文中文输入 -->
<nexdot-braille-input
  for="chinese"
  mode="chinese"
  rime-base-url="/nexdot-rime"
></nexdot-braille-input>

<!-- 六点英文 -->
<nexdot-braille-input for="english" mode="text"></nexdot-braille-input>

<!-- 数字 1-0 -->
<nexdot-braille-input for="pin" mode="number"></nexdot-braille-input>

<!-- U+2800–U+283F -->
<nexdot-braille-input for="raw" mode="unicode"></nexdot-braille-input>

JavaScript API

import type {
  BrailleEngine,
  ChineseBrailleEngine,
  NexDotBrailleInputElement,
} from "@nexdot/braille-input";

const keyboard = document.querySelector<NexDotBrailleInputElement>(
  "nexdot-braille-input",
)!;

keyboard.show();
keyboard.close();

const customEngine: BrailleEngine = {
  translate(cell, context) {
    return { text: String(cell.mask), announcement: "已输入自定义内容" };
  },
};
keyboard.engine = customEngine;

// 也可以替换中文引擎
keyboard.chineseEngine = new ChineseBrailleEngine({
  wasmDir: "/nexdot-rime",
});

组件事件：

• braille-open
• braille-input，event.detail 含 text、cell、inputType
• braille-close

主题

nexdot-braille-input {
  --nexdot-accent: #5b35f5;
  --nexdot-surface: #fff;
  --nexdot-text: #111;
  --nexdot-muted: #666;
  --nexdot-border: #ddd;
  --nexdot-dot-size: 4.75rem;
}

本地开发

npm install
npm run dev
npm run check

当前开发工具链采用 Vite 8、Vitest 4、TypeScript 7 与 Node.js 24。运行 npm run build:demo 会将 GitHub Pages 站点生成到 site-dist；合并到 main 后由 GitHub Actions 自动完成部署。

当前边界

• 浏览器不能可靠检测用户是否开启读屏，因此组件始终把入口放在无障碍树中。
• iOS Safari 网页没有原生 App 的 allowsDirectInteraction 能力。读屏开启时，多指手势 可能被系统读屏接管，所以默认的六点开关是完整、可靠的输入路径；快速触摸模式仅作为增强。
• 当前不包含商业授权、代码混淆或银行级安全输入。
• 发布包为专有软件；开源运行时及词库的许可说明见 THIRD_PARTY_NOTICES.md。