keyBoard base on React , support hand write.
They have the same function as the React version
- 支持多达五种键盘模式
- 支持自定义主题色
- 已集成丰富的中文字库
- 支持急速识别的手写能力
- react 组件开箱即用
Edge |
Firefox |
Chrome |
Safari |
Opera |
Edge |
last 2 versions |
last 2 versions |
last 2 versions |
last 2 versions |
$ 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'));
属性 |
说明 |
类型 |
可选值 |
默认值 |
data-mode |
弹出输入法的类型:
en 英文小写
number 数字
symbol 标点
handwrite 手写 不传 默认中文 |
String |
en
number
symbol
handwrite |
default as * |
data-prop |
注册的输入框的类型 |
String |
* |
|
参数 |
说明 |
默认值 |
类型 |
是否必须 |
版本 |
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+ |
参数 |
说明 |
类型 |
版本 |
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+ |
方法名 |
说明 |
类型 |
版本 |
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
版本代码