https://github.com/cangshudada/react-keyboard
keyBoard base on React , support hand write✒
https://github.com/cangshudada/react-keyboard
handwriting keyboard react typescript
Last synced: about 1 month ago
JSON representation
keyBoard base on React , support hand write✒
- Host: GitHub
- URL: https://github.com/cangshudada/react-keyboard
- Owner: cangshudada
- License: mit
- Created: 2021-01-24T08:01:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-26T01:28:45.000Z (about 4 years ago)
- Last Synced: 2025-04-14T06:55:05.644Z (about 1 month ago)
- Topics: handwriting, keyboard, react, typescript
- Language: TypeScript
- Homepage: https://www.cmappax.com/keyboard/react
- Size: 3.09 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Simple, Fast Key-Board.
> ### keyBoard base on React , support hand write.
> ### Other versions
- For Vue 2.x, Please to using [keyboard-virtual-vue](https://github.com/cangshudada/vue-keyBoard).
- For Vue 3.0, Please to using [vue-keyboard-virtual-next](https://github.com/cangshudada/vue-keyBoard-next).
**They have the same function as the React version**
## Overview
Fully Featured demo
## 关于
### 特性 🎉
- 支持多达五种键盘模式
- 支持自定义主题色
- 已集成丰富的中文字库
- 支持急速识别的手写能力
- react 组件开箱即用
## 支持环境
| [
](http://godban.github.io/browsers-support-badges/) Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 安装
### 使用 npm 或 yarn 安装
```bash
$ npm install virtual-keyboard-react --save
```
```bash
$ yarn add virtual-keyboard-react --save
```
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
## 使用
### 组件引入
```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "virtual-keyboard-react/keyboard.min.css";
import KeyBoard from "virtual-keyboard-react";
const App:React.FC = () => {
return (
{/* 注册键盘的输入框 */}
{/* 键盘 */}
{
console.log('value', value);
}}
keyChange={value => {
console.log('value', value);
}}
/>
)
}
ReactDOM.render(, document.getElementById('root'));
```
### 配置参数
### Input 标签属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
| :-----------: | :----------------------------------------------------------- | :----- | :------------------------------------------ | :------------- |
| **data-mode** | 弹出输入法的类型：
`en` 英文小写
`number`数字
`symbol` 标点
`handwrite` 手写
`不传` 默认中文 | String | `en`
`number`
`symbol`
`handwrite` | `default as *` |
| **data-prop** | 注册的输入框的类型 | String | * | |
### Props 属性
| 参数 | 说明 | 默认值 | 类型 | 是否必须 | 版本 |
| :---------------: | :----------------------------------------------------------: | :---------------------: | :------: | :------: | :-----: |
| autoChange | 当前注册并聚焦的输入框是否自动更新value | true | boolean | 否 | v1.0.0+ |
| color | _主题色_ | `#eaa050` | string | 否 | v1.0.0+ |
| modeList | _键盘渲染模式列表_，若不传 handApi 则不会出现手写板 | ["handwrite", "symbol"] | string[] | 否 | v1.0.0+ |
| blurHide | _是否当前输入框 blur 事件触发隐藏_ | true | boolean | 否 | v1.0.0+ |
| showHandleBar | _是否显示拖拽句柄_ | true | boolean | 否 | v1.0.0+ |
| dargHandleText | 拖拽句柄提示文字 | | string | 否 | v1.0.0+ |
| modal | _是否显示遮罩层_ | false | boolean | 否 | v1.0.0+ |
| closeOnClickModal | 是否点击遮罩层隐藏键盘 | true | boolean | 否 | v1.0.0+ |
| handApi | 手写识别接口，若不传则无法切换手写模块 | | string | 否 | v1.0.0+ |
| animateClass | 键盘显隐动画，内置 slide 动画，如若需要其他动画，可传入相应类名自定义动画 | | string | 否 | v1.0.0+ |
| transitionTime | 键盘显隐动画所需时间 | 300 | number | 否 | v1.0.0+ |
### Events
| 参数 | 说明 | 类型 | 版本 |
| :--------: | :----------------------------------------------------------: | :-----------------------------------------------------: | :-----: |
| keyChange | 按键触发事件，第一个参数为当前触发的按键的标识,`第二个参数为当前聚焦输入框的props值，若没有则直接返回当前聚焦的input元素（v1.0.2版本之后）` | (_value_: string,prop:string\|HTMLInputElement) => void | v1.0.0+ |
| onChange | value改变事件，第一个参数为当前最新通过键盘输入的值，`第二个参数为当前聚焦输入框的props值，若没有则直接返回当前聚焦的input元素（v1.0.2版本之后）` | (_value_: string,prop:string\|HTMLInputElement) => void | v1.0.0+ |
| closed | 键盘关闭事件 | () => void | v1.0.0+ |
| modalClick | 遮罩点击事件 | () => void | v1.0.0+ |
## Component Event
| 方法名 | 说明 | 类型 | 版本 |
| --------------- | ------------------------------------------------------------ | ------------------------------- | ------- |
| reSignUp | 重新给 input 注册绑定键盘,当页面有新的 input 标签出现时调用此方法 | event | v1.0.0+ |
| getCurrentInput | 获取当前聚焦的输入框 | （）=> HTMLInputElement \| null | v1.0.2+ |
```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import "virtual-keyboard-react/keyboard.min.css";
import KeyBoard, { IKeyBoardRef } from "virtual-keyboard-react";
const App:React.FC = () => {
const ref = React.useRef();
// .... 相关逻辑
// 重新给键盘注册输入框
if (ref.current) {
ref.current.reSignUp();
const currentInput = ref.current.getCurrentInput();
console.log('currentInput', value);
}
return (
{/* 注册键盘的输入框 */}
{/* 键盘 */}
{
console.log('value', value);
}}
keyChange={value => {
console.log('value', value);
}}
/>
)
}
ReactDOM.render(, document.getElementById('root'));
```
## 其他说明
- **_有问题欢迎提交_ Issue。**
- **_本项目为作者一人维护，精力有限，有限解决重大 bug，望理解。_**
- **用于生产环境，请使用 `release` 版本代码**