Minimal Mobile-friendly Keyboard Plugin - jQuery kbd.js

File Size: 9.68 KB
Views Total: 1493
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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
  white: true,
  qwertz: false,
  hidden: false,
  input: function(char){[...]},
  coffee: false

3. API methods.

// shows the keyboard

// hides the keyboard

// white theme

// dark theme

// toggles caps lock

// toggles Alt

// locks keyboard

Change log:


  • v0.5.1


  • 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.