See In Action

A simple jQuery on screen keyboard.

• Easy Setup
• Switch layout on the Fly
• Supports multiple input fields
• Custom layout

• First, copy and paste lib/js/keyboard.js in your project, and link to it before the closing </body> element. Make sure jquery is linked before this.
• Next, you'll need to copy and paste the plugin's css into your project. Both Scss and Css are included for flexibility and modifications.
• Lastly, link to the keyboard css file jkeyboard.css file before the closing </head> element.

Note: This plugin requires your website or application already runs a copy of jQuery, version 1.10.1 or higher.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jkeyboard.js"></script>
<link rel="stylesheet" href="jkeyboard.css">

The first thing you will require is a keyboard holder that will hold the keyboard, and an input field on which the keyboard will operate.

<input type="text" id="search_field">
<div id="keyboard"></div>

$('#keyboard').jkeyboard({
    input: $('#search_field')
});

To configure custom options when you initialize jKeyboard, simply pass an object in your call to jkeyboard:

$('keyboard').jkeyboard({
    input: $('#search_field),
    layout: 'english'
});

russian: [
   ['й','ц','у','к','е','н','г','ш','щ','з', 'х' ],
   ['ф','ы','в','а','п','р','о','л','д','ж', 'э'],
    ['shift','я','ч','с','м','и','т','ь','б','ю', 'backspace'],
    ['numeric_switch','layout_switch', 'space','return']
]