Minimal Mobile-friendly Keyboard Plugin - jQuery kbd.js
File Size: | 9.68 KB |
---|---|
Views Total: | 1479 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

kbd.js is a lightweight jQuery plugin that appends a minimal, clean, responsive, virtual qwertz (or qwerty) keyboard to any editable element.
Mobile-friendly and comes with 2 themes: dark and light.
How to use it:
1. Import jQuery library, kbd.css
and kbd.js
into the html file.
<link href="kbd.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="kbd.js"></script>
2. Initialize the keyboard plugin with the following options.
- white: true = white theme; false = dark theme
- qwertz: true = qwertz layout; false = qwerty layout
- hidden: true = hide the keyboard on init; false = show the keyboard on init
- input: callback function
- coffee: enable coffee splash for white theme
$.kbd({ white: true, qwertz: false, hidden: false, input: function(char){[...]}, coffee: false });
3. API methods.
// shows the keyboard $.kbd.show() // hides the keyboard $.kbd.hide() // white theme $.kbd.white() // dark theme $.kbd.white(false) // toggles caps lock $.kbd.caps(true) $.kbd.caps(false) $.kbd.caps() // toggles Alt $.kbd.alt(true) $.kbd.alt(false) $.kbd.alt() // locks keyboard $.kbd.lock(true) $.kbd.lock(false)
Change log:
2018-05-10
- v0.5.1
2018-05-09
- v0.5: Allows to lock keyboard
This awesome jQuery plugin is developed by mntn-dev. For more Advanced Usages, please check the demo page or visit the official website.