who-are-you-laji-keyboard

v1.0.8

Published

9 months ago

谁啊你拉吉键盘 Version1.0.8更新了键盘样式的问题，新增输入中文时也可以点击拼音回填

Downloads

0High
0Medium
0Low

yeyimin

keyboard chinese pinyin virtual-keyboard

中文虚拟键盘

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

特性

🇨🇳 中文输入：基于拼音输入，使用内置简化字库进行汉字匹配
🇺🇸 英文输入：标准 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 支持一下！