Simple On Screen Visual Keyboard with jQuery - jkeyboard

Simple On Screen Visual Keyboard with jQuery - jkeyboard
File Size: 16.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

jkeyboard is a jQuery plugin to create an on screen visual keyboard that supports custom layouts for multiple languages.

How to use it:

1. Include the jkeyboard.css in the head section of the document, and the jkeyboard.js at after loading jQuery library.

<link rel="stylesheet" href="css/jkeyboard.css">

<script src="//"></script>
<script src="js/jkeyboard.js"></script>

2. Create a keyboard container next to your input field.

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

3. Call the plugin and set the default language.

  // 'english', 'azeri', or 'russian'
  layout: "english",
  input: $('#demo')

4. Supported layouts:

azeri: [
  ['q','ü','e','r','t','y','u','i','o','p', 'ö', 'ğ'],
  ['a','s','d','f','g','h','j','k','l', 'ı', 'ə'],
  ['shift','z','x','c','v','b','n','m', 'ç', 'ş','backspace'],
  ['numeric_switch','layout_switch', 'space','return']

english: [
  ['q','w','e','r','t','y','u','i','o','p', ],
  ['a','s','d','f','g','h','j','k','l', ],
  ['shift','z','x','c','v','b','n','m', 'backspace'],
  ['numeric_switch','layout_switch', 'space','return']

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

numeric: [

  ['0', 'return', 'backspace'],

symbolic: [

5. Customize your layout.

  customLayouts: {
    selectable: []



  • Added setLayout method


  • Prevent user from exceeding 'maxlength'


  • Update jkeyboard.css


  • Now keyboard understand cursor position

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