Simple On Screen Visual Keyboard with jQuery jkeyboard - Free Download Simple On Screen Visual Keyboard with jQuery - jkeyboard

Free Download Simple On Screen Visual Keyboard with jQuery – jkeyboard

By Posted on

This time I will share jQuery Plugin and tutorial about Simple On Screen Visual Keyboard with jQuery – jkeyboard, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <link rel="stylesheet" href="css/jkeyboard.css">
2  
3 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
4 <script src="js/jkeyboard.js"></script>

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

view source
1 <input type="text" id="demo">
2 <div id="keyboard"></div>

3. Call the plugin and set the default language.

view source
1 $('#keyboard').jkeyboard({
2   // 'english', 'azeri', or 'russian'
3   layout: "english",
4   input: $('#demo')
5 });

4. Supported layouts:

view source
01 azeri: [
02   ['q', 'ü', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'ö', 'ğ'],
03   ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ı', 'ə'],
04   ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'ç', 'ş', 'backspace'],
05   ['numeric_switch', 'layout_switch', 'space', 'return']
06 ],
07 english: [
08   ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
09   ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
10   ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
11   ['numeric_switch', 'layout_switch', 'space', 'return']
12 ],
13 german: [
14   ['q', 'w', 'e', 'r', 't', 'z', 'u', 'i', 'o', 'p','ü','ß'],
15   ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l','ö','ä'],
16   ['shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
17   ['numeric_switch', 'layout_switch', 'space', 'return']
18 ],
19 russian: [
20   ['й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х'],
21   ['ф', 'ы', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'э'],
22   ['shift', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', 'backspace'],
23   ['numeric_switch', 'layout_switch', 'space', 'return']
24 ],
25 numeric: [
26   ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
27   ['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
28   ['symbol_switch', '.', ',', '?', '!', "'", 'backspace'],
29   ['character_switch', 'layout_switch', 'space', 'return'],
30 ],
31 numbers_only: [
32   ['1', '2', '3',],
33   ['4', '5', '6',],
34   ['7', '8', '9',],
35   ['0', 'return', 'backspace'],
36 ],
37 symbolic: [
38   ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
39   ['_', '\', '|', '~', '<', '>'],
40   ['numeric_switch', '.', ',', '?', '!', "'", 'backspace'],
41   ['character_switch', 'layout_switch', 'space', 'return'],
42  
43 ]

5. Customize your layout.

view source
1 $('#keyboard').jkeyboard({
2   customLayouts: {
3     selectable: []
4   }
5 });

Changelog:

2019-10-10

source : jquery.net

Related posts: