分享一个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. })
  8. // 渲染数字键盘
  9. const keyboard = new aKeyboard.numberKeyboard({
  10.     el: '#main'
  11. })

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

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

4、切换样式模板。

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

 

源码下载:

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

 

波波
你想把广告放到这里吗?

发表评论

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