分享一个js实现的虚拟键盘A-keyboard

A-Keyboard是一个小型的 JavaScript 虚拟键盘。我们可以通过一个简单的演示页面看下虚拟键盘的大致效果。在线体验>>

js实现的虚拟键盘

这个虚拟键盘自带三种主题，可以自由切换。同时也可以单独使用数字键盘用于数字类密码的输入。效果非常的棒。

使用方法：

1、引入CSS样式。

  1. <link rel="stylesheet" href="css/index.css">

2、引入JS文件。

  1. <script src="index.js"></script>

3、渲染键盘。

  1. // 渲染普通键盘
  2. const keyboard = new aKeyboard.keyboard({
  3.     el: '#main', // 元素选择器名称
  4.     style: { // 设置自定义样式
  5.         margin: 'auto'
  6.     }
  7. })
  9. // 渲染数字键盘
  10. const keyboard = new aKeyboard.numberKeyboard({
  11.     el: '#main'
  12. })

keyboard 类提供了 2 个函数，分别为 inputOn 和 onclick：

  1. //用来设置输入目标元素，设置之后用户点击键盘上的按键就可以输入内容了
  2. keyboard.inputOn(目标元素选择器, 目标元素输入类型（value、innerHTML、innerText）);
  4. //用来设置按键点击事件（会覆盖默认事件）
  5. keyboard.onclick(按键名称, 事件函数);

4、切换样式模板。

你可以通过修改 CSS 文件的方式创建你的专属模板，默认为你提供了 index，index-classic，index-dark 这几个模板，可以通过修改引入的CSS文件来切换不同的样式。

 

源码下载：

此处为隐藏的内容！
发表评论并刷新，才能查看
发表评论

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！

目前评论：1   其中：访客  1   博主  0

  1. avatar siamese_Kitty 0
    2021年01月29日 上午11:40  沙发

    感谢w