Package Exports

chinese-keyboard.js
chinese-keyboard.js/src/keyboard.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chinese-keyboard.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎹 Chinese Keyboard.js

一个轻量级的中文虚拟键盘组件，支持拼音输入、多种主题和多框架集成。

✨ 特性

🇨🇳 智能拼音输入 - 支持全拼输入，智能候选词
🎨 多种主题 - 深色、浅色、中国红三套主题
📱 响应式设计 - 完美适配桌面和移动端
🔧 多框架支持 - 支持 Vue2、Vue3、React 以及原生 JS
📝 自定义词库 - 支持添加自定义拼音词库
⚡ 轻量级 - 无依赖，体积小巧

🚀 快速开始

基本用法

// 创建键盘实例
const keyboard = new ChineseKeyboard();

完整配置

const keyboard = new ChineseKeyboard({
  // 目标容器元素（可选）
  target: document.getElementById("my-container"),
  // 或者使用 container（与 target 等效）
  container: document.getElementById("my-container"),

  // 自动显示键盘（默认: true）
  autoShow: true,

  // 自动隐藏键盘（默认: true）
  autoHide: true,

  // 默认输入模式（默认: "chinese"）
  mode: "chinese", // "chinese" | "english" | "symbol"

  // 回调函数
  onInput: function (text) {
    console.log("输入内容:", text);
  },

  onModeChange: function (mode) {
    console.log("模式切换:", mode);
  },

  onShow: function () {
    console.log("键盘显示");
  },

  onHide: function () {
    console.log("键盘隐藏");
  },
});

📖 配置选项 (Options)

参数	类型	默认值	说明
`target` / `container`	HTMLElement	null	键盘容器元素，不指定则自动创建
`autoShow`	Boolean	true	是否在输入框获得焦点时自动显示键盘
`autoHide`	Boolean	true	是否在输入框失去焦点时自动隐藏键盘
`mode`	String	"chinese"	默认输入模式：`chinese`、`english`、`symbol`
`onInput`	Function	null	输入回调函数，参数为输入的文本
`onModeChange`	Function	null	模式切换回调函数，参数为当前模式
`onShow`	Function	null	键盘显示回调函数
`onHide`	Function	null	键盘隐藏回调函数

🛠️ 主要方法

显示/隐藏键盘

// 显示键盘
keyboard.show();

// 隐藏键盘
keyboard.hide();

自定义词库

// 添加自定义拼音词库
keyboard.addCustomDictionary("hd", ["好的", "互动", "后端", "很多"]);
keyboard.addCustomDictionary("zt", ["载体", "状态", "昨天", "主题"]);

🎨 主题配置

项目提供三套预设主题，在 HTML 中引入对应的 CSS 文件：

<!-- 深色主题 -->
<link rel="stylesheet" href="src/keyboard-dark.css" />

<!-- 浅色主题 -->
<link rel="stylesheet" href="src/keyboard-light.css" />

<!-- 中国红主题 -->
<link rel="stylesheet" href="src/keyboard-china-red.css" />

📁 文件结构

chinese-keyboard/
├── src/
│   ├── keyboard.js           # 核心键盘逻辑
│   ├── simplified.js         # 简体中文拼音字库
│   ├── keyboard-dark.css     # 深色主题样式
│   ├── keyboard-light.css    # 浅色主题样式
│   └── keyboard-china-red.css # 中国红主题样式
├── demo.html                 # 完整演示示例
└── README.md

📦 安装

NPM 安装

npm install chinese-keyboard.js

CDN 引入

<!-- 引入键盘脚本 -->
<script src="https://cdn.jsdelivr.net/npm/chinese-keyboard.js/src/keyboard.js"></script>
<!-- 引入主题样式 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/chinese-keyboard.js/src/keyboard-dark.css"
/>

🌟 框架集成示例

🟢 Vue 3 示例

// 在main.js引入键盘以及样式并创建即可，其余的可以不需要写任何代码
// 如果使用 npm 安装
import ChineseKeyboard from "chinese-keyboard.js";
/* 引入键盘样式 */
import "chinese-keyboard.js/src/keyboard-dark.css";

const keyboard = new ChineseKeyboard();

🟨 原生 JavaScript 示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生 JS 中文键盘示例</title>
    <!-- 通过 CDN 引入样式 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/chinese-keyboard.js/src/keyboard-dark.css"
    />
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        background: #f5f5f5;
      }

      .container {
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .input-group {
        margin-bottom: 20px;
      }

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
      }

      input,
      textarea {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        border: 2px solid #ddd;
        border-radius: 8px;
        transition: border-color 0.3s;
        box-sizing: border-box;
      }

      input:focus,
      textarea:focus {
        outline: none;
        border-color: #007bff;
      }

      .status {
        background: #e3f2fd;
        padding: 15px;
        border-radius: 8px;
        margin: 20px 0;
      }

      .controls {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      button {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        background: #007bff;
        color: white;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.3s;
      }

      button:hover {
        background: #0056b3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🎹 原生 JavaScript 中文键盘</h1>

      <div class="input-group">
        <label for="text-input">单行输入框:</label>
        <input type="text" id="text-input" placeholder="点击开始输入中文..." />
      </div>

      <div class="input-group">
        <label for="textarea-input">多行文本框:</label>
        <textarea
          id="textarea-input"
          rows="4"
          placeholder="在这里输入更多内容..."
        ></textarea>
      </div>
    </div>

    <!-- 通过 CDN 引入键盘脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/chinese-keyboard.js/src/keyboard.js"></script>

    <script>
      // 全局变量
      let keyboard = null;

      // 初始化键盘
      function initKeyboard() {
        keyboard = new ChineseKeyboard();

        // 添加自定义词库
        keyboard.addCustomDictionary("js", [
          "JavaScript",
          "前端开发",
          "编程语言",
        ]);
        keyboard.addCustomDictionary("web", [
          "网页",
          "网站",
          "Web开发",
          "前端",
        ]);
        keyboard.addCustomDictionary("code", [
          "代码",
          "编程",
          "开发",
          "程序员",
        ]);
      }
    </script>
  </body>
</html>

📖 更多示例

想了解更多功能和用法，请参考 demo.html 文件，其中包含：

📝 输入框和文本域的完整测试
🎨 主题切换演示
🔧 高级配置示例
📱 响应式布局展示

📄 许可证

MIT License

👤 作者

叶 1 福建

⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！