Minimal Mobile-friendly Keyboard Plugin - jQuery kbd.js

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.