【开源】 jquery桌面虚拟键盘工具库
- 2019 年 11 月 6 日
- 筆記
简要教程
A-Keyboard是一款js虚拟键盘库。该插件可以在桌面端模拟普通键盘，移动端键盘和数字键盘。并且内置了几种可选用的主题效果。
使用方法
引入公共CSS
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="css/index.css">
内置主题的CSS文件。
<!-- Default --> <link rel="stylesheet" href="./css/index.css"> <!-- Classic --> <link rel="stylesheet" href="./css/index-classic.css"> <!-- Dark --> <link rel="stylesheet" href="./css/index-dark.css"> <!-- Grass Green --> <link rel="stylesheet" href="./css/index-grassGreen.css">
初始化插件，引入代码库
通过模块化的方式来使用库文件。
<script src="js/index.js"></script> <script> const keyboard = new aKeyboard.keyboard({ el: '#main', style: {}, fixedBottomCenter: true }) keyboard.inputOn('#input', 'value') keyboard.onclick('Enter', function() { alert('oh! 这是自定义事件！它覆盖了原始的回车事件。This is a custom event! It override the original enter event.'); }) </script>
<script src="./index.js"></script> const keyboard = require('./keyboard'), numberKeyboard = require('./keyboard.number'), mobileKeyboard = require('./keyboard.mobile'); window.aKeyboard = { keyboard, numberKeyboard, mobileKeyboard }
在指定的元素上使用虚拟键盘。
<textarea></textarea> <div id="main"></div>
// keyboard const keyboard = new aKeyboard.keyboard({ el: '#main', style: {}, // additional styles fixedBottomCenter: true }); keyboard.inputOn('#input', 'value'); // mobile keyboard const keyboard = new aKeyboard.mobileKeyboard({ el: '#main', style: {}, // additional styles fixedBottomCenter: true }); keyboard.inputOn('#input', 'value'); // keypad const keyboard = new aKeyboard.numberKeyboard({ el: '#main', style: {}, // additional styles fixedBottomCenter: true }); keyboard.inputOn('#input', 'value');
A-Keyboard虚拟键盘插件插件的github网址为：https://github.com/18510047382/A-Keyboard
