A-Keyboard是一個小型的 JavaScript 虛擬鍵盤。
訪問 A-Keyboard Github Demo 網站查看在線 鍵盤、數字鍵盤 Demo。
Default:
Classic:
Dark:
GrassGreen:
Default數字鍵盤:
Classic數字鍵盤:
Dark數字鍵盤:
GrassGreen數字鍵盤:
首先導入 CSS 文件：
<link rel="stylesheet" href="css/index.css">
你也可以使用 CDN：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/akeyboard@version/css/index.css">
之後你需要導入 JS 文件：
<script> 引入
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/akeyboard@version/index.js"></script>
構建大型項目推薦使用 NPM 安裝：
$ npm i akeyboard
如果你對使用有任何問題，請查看 test 文件夾中的 html 文件，裡面有用例。
導入 JS 和 CSS 文件后你就可以通過以下方式渲染一個虛擬鍵盤，我們提供了 2 種虛擬鍵盤 普通鍵盤 和 數字鍵盤：
// 渲染普通鍵盤
const keyboard = new aKeyboard.keyboard({
el: '#main', // 元素選擇器名稱
style: { // 設置自定義樣式
margin: 'auto'
},
fixedBottomCenter: true // 將鍵盤自動固定到底部，並設置 width100%
})
// 渲染數字鍵盤
const keyboard = new aKeyboard.numberKeyboard({
el: '#main'
})
keyboard 類提供了 2 個函數，分別為 inputOn 和 onclick：
//用來設置輸入目標元素，設置之後用戶點擊鍵盤上的按鍵就可以輸入內容了
keyboard.inputOn(目標元素選擇器, 目標元素輸入類型（value、innerHTML、innerText）);
//用來設置按鍵點擊事件（會覆蓋默認事件）
keyboard.onclick(按鍵名稱, 事件函數);
你可以通過修改 CSS 文件的方式創建你的專屬模板，我們默認為你提供了 index，index-classic，index-dark，index-grassGreen 這幾個模板：
<link rel="stylesheet" href="css/index-classic.css">
[admin
]
來源：OsChina
連結：https://www.oschina.net/news/110659/a-keyboard-1-0-0-alpha-released
A-Keyboard v1.0.0-alpha 發布，JS 虛擬鍵盤插件已經有299次圍觀