Package Exports

who-are-you-laji-keyboard
who-are-you-laji-keyboard/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 (who-are-you-laji-keyboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

中文虚拟键盘

一个支持中文拼音输入、英文输入和符号输入的虚拟键盘组件。

特性

🇨🇳 中文输入：基于拼音输入，使用内置简化字库进行汉字匹配
🇺🇸 英文输入：标准 QWERTY 键盘布局
🔣 符号输入：常用符号和特殊字符
📱 响应式设计：专为竖屏设备优化（如 1080×1920 分辨率）
⚡ 框架无关：纯 JavaScript 实现，可适配 Vue、React、Uniapp 等
🚀 零依赖：无需外部库，开箱即用
💡 超简集成：一行代码即可使用

安装

NPM 安装（推荐）

npm install chinese-virtual-keyboard

CDN 引入

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.css">

<!-- JavaScript -->
<script src="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.min.js"></script>

快速开始

NPM 使用方法（推荐）

// ES6 模块引入
import { initChineseKeyboard, autoInitChineseKeyboard } from 'chinese-virtual-keyboard';
import 'chinese-virtual-keyboard/dist/keyboard.css';

// 一行代码搞定
autoInitChineseKeyboard();

// 或者自定义配置
const keyboard = initChineseKeyboard({
  mode: 'chinese',
  autoShow: true
});

CommonJS 使用方法

const { initChineseKeyboard } = require('chinese-virtual-keyboard');

// 引入样式（如果使用构建工具）
require('chinese-virtual-keyboard/dist/keyboard.css');

// 初始化键盘
const keyboard = initChineseKeyboard();

CDN 使用方法

<!-- 1. 引入文件 -->
<link rel="stylesheet" href="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.css">
<script src="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.min.js"></script>

<!-- 2. 一行代码搞定 -->
<script>
  autoInitChineseKeyboard();
</script>

本地文件使用方法

<!-- 1. 引入文件 -->
<link rel="stylesheet" href="src/keyboard.css">
<script src="src/keyboard.js"></script>

<!-- 2. 一行代码搞定 -->
<script>
  autoInitChineseKeyboard();
</script>

就这么简单！现在页面上的所有输入框都会自动支持虚拟键盘。

自定义配置

// 带配置的初始化
const keyboard = initChineseKeyboard({
  mode: 'chinese',        // 默认模式：chinese/english/symbol
  autoShow: true,         // 自动显示键盘
  autoHide: true,         // 自动隐藏键盘
  onModeChange: (mode) => console.log('模式切换:', mode)
});

框架集成

Vue 3

<template>
  <div>
    <input v-model="inputText" placeholder="开始输入..." />
  </div>
</template>

<script>
import { initChineseKeyboard } from 'chinese-virtual-keyboard';
import 'chinese-virtual-keyboard/dist/keyboard.css';

export default {
  data() {
    return {
      inputText: ''
    };
  },
  mounted() {
    // 一行代码搞定
    this.keyboard = initChineseKeyboard();
  },
  beforeUnmount() {
    this.keyboard?.destroy();
  }
};
</script>

Vue 2

<template>
  <div class="keyboard-demo">
    <!-- 基础输入 -->
    <div class="input-group">
      <label>单行输入框：</label>
      <input 
        v-model="formData.username" 
        type="text" 
        placeholder="请输入用户名..."
        class="demo-input"
      />
    </div>

    <!-- 多行输入 -->
    <div class="input-group">
      <label>多行文本：</label>
      <textarea 
        v-model="formData.description" 
        placeholder="请输入描述信息..."
        rows="4"
        class="demo-input"
      ></textarea>
    </div>

    <!-- 表单输入 -->
    <div class="input-group">
      <label>邮箱地址：</label>
      <input 
        v-model="formData.email" 
        type="email" 
        placeholder="请输入邮箱..."
        class="demo-input"
      />
    </div>

    <!-- 显示输入内容 -->
    <div class="result">
      <h3>输入结果：</h3>
      <p><strong>用户名：</strong>{{ formData.username }}</p>
      <p><strong>描述：</strong>{{ formData.description }}</p>
      <p><strong>邮箱：</strong>{{ formData.email }}</p>
    </div>

    <!-- 键盘控制按钮 -->
    <div class="controls">
      <button @click="showKeyboard" class="btn">显示键盘</button>
      <button @click="hideKeyboard" class="btn">隐藏键盘</button>
      <button @click="switchMode('chinese')" class="btn">中文模式</button>
      <button @click="switchMode('english')" class="btn">英文模式</button>
      <button @click="switchMode('symbol')" class="btn">符号模式</button>
    </div>
  </div>
</template>

<script>
import { initChineseKeyboard } from 'chinese-virtual-keyboard';
import 'chinese-virtual-keyboard/dist/keyboard.css';

export default {
  name: 'KeyboardDemo',
  data() {
    return {
      keyboard: null,
      formData: {
        username: '',
        description: '',
        email: ''
      }
    };
  },
  mounted() {
    // 初始化键盘
    this.initKeyboard();
  },
  beforeDestroy() {
    // Vue2 使用 beforeDestroy
    if (this.keyboard) {
      this.keyboard.destroy();
    }
  },
  methods: {
    // 初始化键盘
    initKeyboard() {
      this.keyboard = initChineseKeyboard({
        mode: 'chinese',           // 默认中文模式
        autoShow: true,            // 自动显示
        autoHide: true,            // 自动隐藏
        onModeChange: this.handleModeChange,
        onShow: this.handleKeyboardShow,
        onHide: this.handleKeyboardHide
      });
    },

    // 手动显示键盘
    showKeyboard() {
      if (this.keyboard) {
        this.keyboard.show();
      }
    },

    // 手动隐藏键盘
    hideKeyboard() {
      if (this.keyboard) {
        this.keyboard.hide();
      }
    },

    // 切换键盘模式
    switchMode(mode) {
      if (this.keyboard) {
        this.keyboard.setMode(mode);
      }
    },

    // 模式切换回调
    handleModeChange(mode) {
      console.log('键盘模式切换为:', mode);
      this.$emit('mode-change', mode);
    },

    // 键盘显示回调
    handleKeyboardShow() {
      console.log('键盘已显示');
      this.$emit('keyboard-show');
    },

    // 键盘隐藏回调
    handleKeyboardHide() {
      console.log('键盘已隐藏');
      this.$emit('keyboard-hide');
    }
  }
};
</script>

<style scoped>
.keyboard-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

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

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.demo-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

.demo-input:focus {
  outline: none;
  border-color: #007bff;
}

.result {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin: 20px 0;
}

.result h3 {
  margin-top: 0;
  color: #007bff;
}

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

.btn {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn:hover {
  background: #0056b3;
}
</style>

Vue 2 组合式使用

<template>
  <div>
    <!-- 使用键盘组件 -->
    <ChineseKeyboard 
      :auto-show="true"
      :mode="keyboardMode"
      @mode-change="onModeChange"
      @keyboard-show="onKeyboardShow"
      @keyboard-hide="onKeyboardHide"
    />
    
    <!-- 你的输入表单 -->
    <form>
      <input v-model="username" placeholder="用户名" />
      <textarea v-model="message" placeholder="留言"></textarea>
    </form>
  </div>
</template>

<script>
// 创建一个可复用的键盘组件
const ChineseKeyboard = {
  props: {
    autoShow: {
      type: Boolean,
      default: true
    },
    mode: {
      type: String,
      default: 'chinese'
    }
  },
  data() {
    return {
      keyboard: null
    };
  },
  async mounted() {
    // 动态导入（可选）
    const { initChineseKeyboard } = await import('chinese-virtual-keyboard');
    
    this.keyboard = initChineseKeyboard({
      mode: this.mode,
      autoShow: this.autoShow,
      onModeChange: (mode) => this.$emit('mode-change', mode),
      onShow: () => this.$emit('keyboard-show'),
      onHide: () => this.$emit('keyboard-hide')
    });
  },
  beforeDestroy() {
    if (this.keyboard) {
      this.keyboard.destroy();
    }
  },
  watch: {
    mode(newMode) {
      if (this.keyboard) {
        this.keyboard.setMode(newMode);
      }
    }
  },
  render(h) {
    return h('div'); // 键盘会自动添加到 body
  }
};

export default {
  components: {
    ChineseKeyboard
  },
  data() {
    return {
      username: '',
      message: '',
      keyboardMode: 'chinese'
    };
  },
  methods: {
    onModeChange(mode) {
      console.log('模式变更:', mode);
    },
    onKeyboardShow() {
      console.log('键盘显示');
    },
    onKeyboardHide() {
      console.log('键盘隐藏');
    }
  }
};
</script>

React

import { useEffect } from 'react';
import { initChineseKeyboard } from 'chinese-virtual-keyboard';
import 'chinese-virtual-keyboard/dist/keyboard.css';

function App() {
  useEffect(() => {
    const keyboard = initChineseKeyboard();
    return () => keyboard.destroy();
  }, []);

  return (
    <div>
      <input placeholder="开始输入..." />
    </div>
  );
}

Angular

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { initChineseKeyboard } from 'chinese-virtual-keyboard';

@Component({
  selector: 'app-root',
  template: '<input placeholder="开始输入..." />'
})
export class AppComponent implements OnInit, OnDestroy {
  private keyboard: any;

  ngOnInit() {
    this.keyboard = initChineseKeyboard();
  }

  ngOnDestroy() {
    this.keyboard?.destroy();
  }
}

/* angular.json 或 styles.css 中添加 */
@import '~chinese-virtual-keyboard/dist/keyboard.css';

原生HTML

<body>
  <input type="text" placeholder="输入框" />
  
  <!-- CDN 方式 -->
  <link rel="stylesheet" href="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.css">
  <script src="https://unpkg.com/chinese-virtual-keyboard/dist/keyboard.min.js"></script>
  
  <!-- 初始化 -->
  <script>autoInitChineseKeyboard();</script>
</body>

API 参考

快速方法

// 超简初始化（推荐）
autoInitChineseKeyboard();

// 带配置初始化
const keyboard = initChineseKeyboard(options);

配置选项

选项	类型	默认值	说明
`mode`	string	'chinese'	默认键盘模式：'chinese', 'english', 'symbol'
`autoShow`	boolean	true	输入框获得焦点时自动显示键盘
`autoHide`	boolean	true	输入框失去焦点时自动隐藏键盘
`target`	Element	document.body	键盘容器元素
`onModeChange`	function	null	模式切换回调
`onShow`	function	null	键盘显示回调
`onHide`	function	null	键盘隐藏回调

实例方法

const keyboard = initChineseKeyboard();

keyboard.show();              // 显示键盘
keyboard.hide();              // 隐藏键盘
keyboard.setMode('english');  // 切换模式
keyboard.destroy();           // 销毁键盘

NPM 包信息

# 安装
npm install chinese-virtual-keyboard

# 查看版本
npm list chinese-virtual-keyboard

# 更新到最新版本
npm update chinese-virtual-keyboard

包大小

压缩后 JS: ~15KB
压缩后 CSS: ~8KB
总大小: ~23KB

支持的模块系统

✅ ES6 Modules (import/export)
✅ CommonJS (require/module.exports)
✅ UMD (浏览器全局变量)
✅ TypeScript 支持（包含类型定义）

浏览器兼容性

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
✅ 移动端浏览器

演示

完整功能演示：打开 demo.html
简化版演示：打开 simple-demo.html
在线演示：https://your-demo-site.com

更新日志

v1.0.0

🎉 首次发布
✨ 支持中文拼音输入、英文输入、符号输入
🚀 零依赖，一行代码集成
📱 响应式设计，移动端优化
🔧 支持多种框架集成

开发和贡献

本地开发

# 克隆项目
git clone https://github.com/your-username/chinese-virtual-keyboard.git

# 进入目录
cd chinese-virtual-keyboard

# 安装依赖（如果有）
npm install

# 打开演示
open demo.html

构建发布

# 构建生产版本
npm run build

# 发布到 NPM
npm publish

许可证

MIT License - 详见 LICENSE 文件

问题反馈

如有问题或建议，请提交 Issues

贡献

欢迎提交 Pull Request 来改进这个项目！

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