Minimal Virtual Keyboard Plugin For jQuery - SoftKey

SoftKey is a lightweight and cross-browser jQuery plugin that lets you create a virtual keyboard with custom layout for a specific text field.

How to use it:

1. Load the stylesheet softkeys-0.0.1.css in the header of the webpage that will provide the primary styles for the virtual keyboard.

<link rel="stylesheet" href="softkeys-0.0.1.css">

2. Create a placeholder element to place the virtual keyboard. The data-target attribute is used to specify the target text field where you want to append the virtual keyboard to.

<div class="softkeys" data-target="input"></div>

3. Load jQuery library and the JavaScript file softkeys-0.0.1.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="softkeys-0.0.1.js"></script>

4. Initialize the plugin and create your own keyboard layout.

$('.softkeys').softkeys({
  target : $('.softkeys').data('target'),
  layout : [
      [
          ['`','~'],
          ['1','!'],
          ['2','@'],
          ['3','#'],
          ['4','$'],
          ['5','%'],
          ['6','^'],
          ['7','&'],
          ['8','*'],
          ['9','('],
          ['0',')'],
          ['-', '_'],
          ['=','+'],
          'delete'
      ],
      [
          'q','w','e','r','t','y','u','i','o','p',
          ['[','{'],
          [']','}']
      ],
      [
          'capslock',
          'a','s','d','f','g','h','j','k','l',
          [';',':'],
          ["'",'"'],
          ['\\','|']
      ],
      [
          'shift',
          'z','x','c','v','b','n','m',
          [',','<'],
          ['.','>'],
          ['/','?'],
          ['@']
      ]
  ]
});

---

This awesome jQuery plugin is developed by cozyt. For more Advanced Usages, please check the demo page or visit the official website.