keyBoard base on React , support hand write.

Other versions

• For Vue 2.x, Please to using keyboard-virtual-vue.
• For Vue 3.0, Please to using vue-keyboard-virtual-next.

They have the same function as the React version

Overview

关于

特性 🎉

• 支持多达五种键盘模式
• 支持自定义主题色
• 已集成丰富的中文字库
• 支持急速识别的手写能力
• react 组件开箱即用

支持环境

| Edge | Firefox | Chrome | Safari | Opera | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

安装

使用 npm 或 yarn 安装

$ npm install virtual-keyboard-react --save

$ yarn add virtual-keyboard-react --save

如果你的网络环境不佳，推荐使用 cnpm。

使用

组件引入

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 (
    {/* 注册键盘的输入框 */}
    <input data-mode />
    {/* 键盘 */}
    <KeyBoard
        modal
        onChange={value => {
          console.log('value', value);
        }}
        keyChange={value => {
          console.log('value', value);
        }}
      />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

配置参数

Input 标签属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | :-----------: | :----------------------------------------------------------- | :----- | :------------------------------------------ | :------------- | | data-mode | 弹出输入法的类型：en 英文小写number数字symbol 标点handwrite 手写 不传 默认中文 | String | ennumbersymbolhandwrite | 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+ |

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<IKeyBoardRef>();

  // .... 相关逻辑
  // 重新给键盘注册输入框
  if (ref.current) {
      ref.current.reSignUp();
      const currentInput = ref.current.getCurrentInput();
      console.log('currentInput', value);
  }
    
  return (
    {/* 注册键盘的输入框 */}
    <input data-mode />
    {/* 键盘 */}
    <KeyBoard
        modal
        ref={ref}
        onChange={value => {
          console.log('value', value);
        }}
        keyChange={value => {
          console.log('value', value);
        }}
      />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

其他说明

• 有问题欢迎提交 Issue。
• 本项目为作者一人维护，精力有限，有限解决重大 bug，望理解。
• 用于生产环境，请使用 release 版本代码