代码拉取完成,页面将自动刷新
同步操作将从 Bd999/A-Keyboard 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
A-Keyboard是一个小型的 JavaScript 虚拟键盘。
访问 A-Keyboard Github Demo 网站查看在线 键盘、数字键盘 Demo。
欢迎加入我们的官方 QQ 群!
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">
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。