react-simple-keyboard虚拟键盘的应用

瞎吉儿吵吵

已于 2023-08-23 16:40:39 修改

阅读量888

点赞数

分类专栏：虚拟键盘文章标签： react.js 计算机外设前端键盘

于 2023-08-23 16:37:56 首次发布

本文链接：https://blog.csdn.net/m0_51788889/article/details/132455230

版权

虚拟键盘专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中使用`react-simple-keyboard`库实现一个简单的虚拟键盘，包括下载安装、组件导入、基本用法、常见属性如键盘实例、布局和事件处理，以及如何将其封装并与AntDesign的Input组件结合，以支持中文输入。

摘要由CSDN通过智能技术生成

1.实现效果：

2.下载安装

npm install react-simple-keyboard --save

3.简单使用

import React, {Component} from 'react';
import Keyboard from 'react-simple-keyboard';
import 'simple-keyboard/build/css/index.css';

class App extends Component {

  onChange = (input) => {
    console.log("Input changed", input);
  }

  onKeyPress = (button) => {
    console.log("Button pressed", button);
  }

  render(){
    return (
      <Keyboard
        onChange={input =>
          this.onChange(input)}
        onKeyPress={button =>
          this.onKeyPress(button)}
      />
    );
  }
}

export default App;

4.常用属性

keyboardRef：键盘的实例，通过React的useRef创建实例

layout：键盘的布局，可自定义

layoutName：react布局名称

onChange：键盘变更事件

onKeyPress：按下键盘事件

onRender：键盘渲染事件 (event)=>{} 一般用于键盘初始化

layoutCandidates：中文键盘

display：键盘按键自定义

preventMouseDownDefault：保护焦点，一般用于点击键盘输入框不失焦

5.键盘封装

键盘都配合输入框使用

import { useRef, useState } from 'react';
import { Input, Drawer } from 'antd';
import styles from './index.less';
import Keyboard from 'react-simple-keyboard';
import 'react-simple-keyboard/build/css/index.css';
import layout from './chinese';
import Button from '../button';
/*
  搜索输入框、虚拟键盘点击输入框弹出虚拟键盘
  placeholder：默认提示
*/
const { Search } = Input;

export default function (props) {
  const { placeholder, search, finish } = props;

  const [input, setInput] = useState('');
  const [layoutName, setLayoutName] = useState('');
  const [language, setLanguage] = useState('chinese');
  const [keyboardOpen, setKeyboardOpen] = useState(false);
  const keyboard = useRef();
  //键盘变更
  const onChange = (input) => {
    setInput(input);
  };
  const onKeyPress = (button) => {
    if (button === '{shift}' || button === '{lock}') handleShift();
    if (button === '{shift}') {
      const newLanguages = language === 'english' ? 'chinese' : 'english';
      setLanguage(newLanguages);
    }
    if (button === '{enter}') {
      setInput('');
      keyboard?.current?.clearInput();
      setTimeout(() => {
        keyboard?.current?.candidateBox.destroy();
      }, 100);
    }
  };
  const handleShift = () => {
    const newLayoutName = layoutName === 'default' ? 'shift' : 'default';
    setLayoutName(newLayoutName);
  };
  const handleChange = (e) => {
    const input = e.target.value;
    setInput(input);
    keyboard.current.setInput(input);
  };

  //关闭抽屉
  const onClose = () => {
    setKeyboardOpen(false);
  };
  const keyboardRender = (event) => {
    event.input.default = input;
  };

  //搜索
  const onSearch = (value) => {
    search(value);
  };
  return (
    <>
      <Search
        value={input}
        placeholder={placeholder}
        onClick={() => {
          setKeyboardOpen(true);
        }}
        className={styles.searchInput}
        onChange={handleChange}
        onSearch={onSearch}
        // allowClear={true}
      />

      <Drawer
        placement="bottom"
        closable={false}
        onClose={onClose}
        open={keyboardOpen}
        className={styles.keydrawer}
        height={285}
        destroyOnClose={true}
        mask={false}
        autoFocus={false}
      >
        <div className={styles.keyboard}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              paddingRight: 5,
            }}
          >
            <div>
              <Button
                type="ok"
                onClick={() => {
                  finish ? finish() : onClose();
                }}
              >
                完成
              </Button>
            </div>
          </div>

          <Keyboard
            keyboardRef={(r) => (keyboard.current = r)}
            layoutName={layoutName}
            onChange={onChange}
            onKeyPress={onKeyPress}
            layout={layout.layout}
            onRender={keyboardRender}
            layoutCandidates={
              language === 'english' ? {} : layout.layoutCandidates
            }
            display={{
              '{bksp}': 'baskspace',
              '{enter}': '清除',
              '{shift}': '中/英',
              '{s}': 'shift',
              '{tab}': 'tab',
              '{lock}': '大/小写',
              '{accept}': 'Submit',
              '{space}': 'Space',
            }}
            preventMouseDownDefault={true}
          />
        </div>
      </Drawer>
    </>
  );
}

使用中文在官方下载chinese.js文件引入