最近我研究了 reactjs 应用程序的虚拟键盘。

我可以找到几个图书馆。

在这篇文章中,我将介绍如何将 KioskBoard 与 reactjs 一起使用,因为最流行的一个simple-keyboard有一个衍生库,称为react-simple-keyboard,它提供了很多关于代码沙箱的示例代码。如果您对它们感兴趣,我强烈建议您查看simple-keyboard文档(https://hodgef.com/simple-keyboard/getting-started/)

实际上,我们的团队决定将react-simple-keyboard用于项目 lol。

简单键盘

hodgef/简单键盘

Javascript 虚拟键盘 - 可定制、响应迅速且轻量级

[](https://github.com/hodgef/simple -keyboard/actions)

Javascript 虚拟键盘。与您的 JS、React、Angular 或 Vue 项目兼容。

🚀 演示

演示展示(Vanilla、Angular、React、Vue)

📦 安装和使用

您可以使用 simple-keyboard 作为 CDN 中的<script>标签,或从 npm 安装它。

查看入门文档以开始。

📖 文档

查看简单键盘文档站点。

随意浏览问答 (FAQ)页面以了解常见用例。

在自己的电脑上运行demo

• 克隆这个仓库

• npm install

• npm start

• 访问http://localhost:3000/

其他版本

• React.js

• 角度

• Vue.js

有问题吗?加入聊天

! zwz 100138 zwz 100139 zwz 100137

✳️ 模块

您可以使用模块扩展简单键盘的功能。如:

• 自动更正

• 输入掩码

• 按键导航

• 滑动键盘

想创建自己的模块吗?查看模块页面以获取说明。

🎯 兼容性

• Internet Explorer 11

• 边缘(斯巴达)16+

• Edge(阿纳海姆/Edge Chromium)79+

• 铬 49+

• Safari 9+

• 火狐 57+

• iOS 9+

注意:如果您...

在 GitHub 上查看

react-simple-keyboard

hodgef/react-simple-keyboard

React 虚拟键盘 - 可定制、响应迅速且轻量级

React 的虚拟键盘。可定制、响应迅速且轻量级。

[](https://github. com/hodgef/react-simple-keyboard/actions)

🚀 演示

https://simple-keyboard.com/demo

📦 安装和使用

查看入门文档开始。

📖 文档

查看简单键盘文档站点。

随意浏览问题与解答页面以了解常见用例。

在自己的电脑上运行demo

• 克隆这个仓库

• npm install

• npm start

• 访问http://localhost:3000/

其他版本

• 香草JS

• 角度

• Vue.js

有问题吗?加入聊天

🎯 兼容性

• Internet Explorer 11

• 边缘(斯巴达)16+

• Edge(阿纳海姆/Edge Chromium)79+

• 铬 49+

zoz100070 Safari 9+

• 火狐 57+

• iOS 9+

注意:如果您不想支持旧版浏览器,可以使用 Modern Browsers 捆绑包(index.modern.js)。

✅ 贡献

欢迎 PR 和问题。随时提交您遇到的任何问题:https://github.com/hodgef/react-simple-keyboard/issues

在 GitHub 上查看

KioskBoard

furcan/KioskBoard

KioskBoard - 用于使用虚拟键盘的纯 JavaScript 库。

KioskBoard - 虚拟键盘

用于使用虚拟键盘的纯 JavaScript 库。

---

当前版本

2.2.0*

---

文档和演示

https://furcan.github.io/KioskBoard/

---

浏览器兼容性

Chrome||Firefox||Safari||Opera||Edge||IE 11

---

(A) 安装&导入

安装

纱

纱线添加信息亭

进入全屏模式 退出全屏模式

npm

npm i 信息亭

进入全屏模式 退出全屏模式

导入

从“kioskboard”导入 KioskBoard;

进入全屏模式 退出全屏模式

zoz100077 * *

(B) 添加到 HTML 文档

CSS和JS

<link rel\u003d"stylesheet" href\u003d"dist/kioskboard-2.2.0.min.css" /&gt

<script src\u003d"dist/kioskboard-2.2.0.min.js"></script>

进入全屏模式 退出全屏模式

或者只有 JS(多合一 - 内部 CSS)

<script src\u003d"dist/kioskboard-aio-2.2.0.min.js"></script>

进入全屏模式 退出全屏模式

---

键盘类型和主题

可以使用 3 种类型的键盘:all、keyboard和numpad。

可以使用 5 种类型的主题。light、dark、flat、material和oldschool。

---

运行/初始化

KioskBoard 虚拟键盘可与input... 一起使用

在 GitHub 上查看

如果您专注于其中一个输入,您将看到一个普通的键盘或小键盘。

祖兹 100293

代码很简单。将useRef传递给<input />并检查 ref.current。如果ref.current不为空,则调用KioskBoard.run。

您可以检查 GitHub 存储库中的选项。

import { useRef, useEffect } from "react";
import "./styles.css";
import KioskBoard from "kioskboard";

function App() {
  const keyboardRef = useRef(null);
  const numpadRef = useRef(null);

  useEffect(() => {
    if (keyboardRef.current) {
      KioskBoard.run(keyboardRef.current, {
        language: "en",
        theme: "light",
        keysArrayOfObjects: [
          {
            "0": "Q",
            "1": "W",
            "2": "E",
            "3": "R",
            "4": "T",
            "5": "Y",
            "6": "U",
            "7": "I",
            "8": "O",
            "9": "P"
          },
          {
            "0": "A",
            "1": "S",
            "2": "D",
            "3": "F",
            "4": "G",
            "5": "H",
            "6": "J",
            "7": "K",
            "8": "L"
          },
          {
            "0": "Z",
            "1": "X",
            "2": "C",
            "3": "V",
            "4": "B",
            "5": "N",
            "6": "M"
          }
        ]
      });
    }
  }, [keyboardRef]);

  useEffect(() => {
    if (numpadRef.current) {
      KioskBoard.run(numpadRef.current, {
        theme: "light",
        keysArrayOfObjects: [
          {
            "0": "7",
            "1": "8",
            "2": "9"
          },
          {
            "0": "4",
            "1": "5",
            "2": "6"
          },
          {
            "0": "1",
            "1": "2",
            "2": "3"
          },
          {
            "0": "0",
            "1": "."
          }
        ]
      });
    }
  }, [numpadRef]);

  return (
    <div className="App">
      <input
        className="inputFromKey"
        ref={keyboardRef}
        type="text"
        data-kioskboard-type="keyboard"
        placeholder="normal keyboard"
      />
      <input
        className="inputFromKey"
        ref={numpadRef}
        type="text"
        data-kioskboard-type="numpad"
        placeholder="numpad"
      />
    </div>
  );
}

export default App;

进入全屏模式 退出全屏模式