Simple On Screen Visual Keyboard with jQuery - jkeyboard

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="//code.jquery.com/jquery-1.11.1.min.js"></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.

$('#keyboard').jkeyboard({
  // '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']
],
german: [
  ['q', 'w', 'e', 'r', 't', 'z', 'u', 'i', 'o', 'p','ü','ß'],
  ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l','ö','ä'],
  ['shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
  ['numeric_switch', 'layout_switch', 'space', 'return']
],
russian: [
  ['й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х'],
  ['ф', 'ы', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'э'],
  ['shift', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', 'backspace'],
  ['numeric_switch', 'layout_switch', 'space', 'return']
],
numeric: [
  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
  ['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
  ['symbol_switch', '.', ',', '?', '!', "'", 'backspace'],
  ['character_switch', 'layout_switch', 'space', 'return'],
],
numbers_only: [
  ['1', '2', '3',],
  ['4', '5', '6',],
  ['7', '8', '9',],
  ['0', 'return', 'backspace'],
],
symbolic: [
  ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
  ['_', '\\', '|', '~', '<', '>'],
  ['numeric_switch', '.', ',', '?', '!', "'", 'backspace'],
  ['character_switch', 'layout_switch', 'space', 'return'],

]

5. Customize your layout.

$('#keyboard').jkeyboard({
  customLayouts: {
    selectable: []
  }
});

Changelog:

2019-10-10

• Prevent event bubbling on function keys to avoid side effects when used as floating keyboard which closes on click outside of keyboard container

2019-06-01

• Modified Backspace function

2019-04-09

• Added german as preset

2018-09-14

• Added setLayout method

2017-06-17

• Prevent user from exceeding 'maxlength'

2016-11-17

• Update jkeyboard.css

2015-03-03

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