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="//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']
],

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:

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.