Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

191 lines (168 sloc) 7.82 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>Virtual Keyboard Language Layouts</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="" rel="stylesheet">
<script src=""></script>
<script src=""></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.min.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.keyboard.extension-typing.js"></script>
<!-- preloaded keyboard layout -->
<script src="layouts/albanian.js" charset="utf-8"></script>
<!-- theme switcher -->
<script src=""></script>
// Change display language, if the definitions are available
if (typeof(language) === 'undefined') { var language = {}; };
var showKb = function(name, lang){
if (language.hasOwnProperty(lang)){
$.extend(true, $.keyboard.defaultOptions, language[lang]);
} else {
$.extend(true, $.keyboard.defaultOptions, language.basic);
layout: name,
usePreview: false,
alwaysOpen: true
// Renaming some of the default keyboard key names (including symbols)
// *Note* this will effect ALL layouts on this page - but will be overridden by specific layout languages
language.basic = {
display : {
'a' : '\u2714:Accept (Shift-Enter)', // check mark - same action as accept
'accept' : '\u2714 Accept:Accept (Shift-Enter)', // check mark
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u2190:Backspace', // Left arrow (same as &larr;)
'bksp' : ($.browser.msie ? '\u2190 Bksp:Backspace' : '\u232b Bksp:Backspace'), // Arrow with X (not in IE) or Left arrow (same as &larr;)
'c' : '\u2716:Cancel (Esc)', // big X, close - same action as cancel
'cancel' : '\u2716 Cancel:Cancel (Esc)', // big X, close - same action as cancel
'clear' : 'C:Clear', // clear num pad
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal', // decimal point for num pad (optional), change '.' to ',' for European format
'e' : '\u21b5:Enter', // down, then left arrow - enter symbol
'enter' : '\u21b5 Enter:Enter', // down, then left arrow - enter symbol
'lock' : '\u21ea Lock:Caps Lock', // caps lock
's' : '\u21e7:Shift', // thick hollow up arrow
'shift' : '\u21e7 Shift:Shift', // thick hollow up arrow
'sign' : '\u00b1:Change Sign', // +/- sign for num pad
'space' : '&nbsp;:Space',
't' : '\u21e5:Tab', // right arrow to bar (used since this virtual keyboard works with one directional tabs)
'tab' : '\u21e5 Tab:Tab' // right arrow to bar (used since this virtual keyboard works with one directional tabs)
// Message added to the key title while hovering, if the mousewheel plugin exists
wheelMessage : 'Use mousewheel to see other keys'
// Theme switcher
var kb = $('#multi'),
opt = $(this).find('option:selected'),
layout = opt.attr('class'),
file = $(this).val();
$('#multi')[file.match('arabic') ? 'addClass' : 'removeClass']('rtl');
if ('keyboard')) { kb.getkeyboard().destroy(); }
if (!language.hasOwnProperty(file)) {
$.getScript('layouts/' + file + '.js', function(){
if ('keyboard')) { kb.getkeyboard().destroy(); }
showKb( layout, file );
} else {
showKb( layout, file );
/* making a few keys wider, to include the symbol - use .ui-keyboard-actionkey to affect all (including space) */
.ui-keyboard-accept, .ui-keyboard-cancel, .ui-keyboard-bksp, .ui-keyboard-enter, .ui-keyboard-shift {
font-size: .8em;
width: 5.2em;
height: 2em;
.rtl {
direction: rtl;
text-align: right;
<div id="page-wrap">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="basic.html">Basic</a>
<a href="mobile.html">Mobile</a>
<a class="current" href="layouts.html">Layouts</a>
<a href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="">Playground</a>
<a class="git" href="">Documentation</a>
<a class="git" href="">Download</a>
<a class="issue" href="">Issues</a><br><br>
<!-- End Links -->
<h1><a href="">Virtual Keyboard Language Layouts</a></h1>
<h4>This is a work in progress.</h4>
<div id="switcher"></div>
<div class="block2">
<select id="lang">
<!-- value="file name", class="layout name", Title -->
<option value="albanian" class="albanian-qwerty">Albanian (qwerty)</option>
<option value="albanian" class="albanian-qwertz">Albanian (qwertz)</option>
<option value="arabic" class="arabic-azerty">Arabic (azerty)</option>
<option value="arabic" class="arabic-qwerty-1">Arabic (qwerty-1)</option>
<option value="arabic" class="arabic-qwerty-2">Arabic (qwerty-2)</option>
<option value="arabic" class="arabic-qwerty-3">Arabic (qwerty-3)</option>
<option value="arabic" class="arabic-qwerty-4">Arabic (qwerty-4)</option>
<option value="belarusian" class="belarusian-qwerty">Belarusian (Belarus)</option>
<option value="bengali" class="bengali-qwerty-1">Bengali (qwerty-1)</option>
<option value="bengali" class="bengali-qwerty-2">Bengali (qwerty-2)</option>
<option value="bulgarian" class="bulgarian-qwerty">Bulgarian (qwerty)</option>
<option value="catalan" class="catalan-qwerty">Catalan (qwerty)</option>
<option value="danish" class="danish-qwerty">Danish (qwerty)</option>
<option value="french" class="french-azerty-1">French (azerty-1)</option>
<option value="french" class="french-azerty-2">French (azerty-2)</option>
<option value="german" class="german-qwertz-1">German (qwertz-1)</option>
<option value="german" class="german-qwertz-2">German (qwertz-2)</option>
<option value="hebrew" class="hebrew-qwerty">Hebrew (qwerty)</option>
<option value="hungarian" class="hungarian-qwertz-1">Magyar (qwertz-1) utf8</option>
<option value="hungarian" class="hungarian-qwertz-2">Magyar (qwertz-2) utf8</option>
<option value="hungarianansi" class="hungarianansi-qwertz-1">Magyar (qwertz-1) ansi</option>
<option value="hungarianansi" class="hungarianansi-qwertz-2">Magyar (qwertz-2) ansi</option>
<option value="latvian" class="latvian-qwerty">Latvian (qwerty)</option>
<option value="russian" class="russian-qwerty">Russian (qwerty)</option>
<option value="swedish" class="swedish-qwerty">Swedish (qwerty)</option>
<option value="swedish" class="swedish-dvorak">Swedish (dvorak)</option>
<option value="turkish" class="turkish-q">Turkish (q)</option>
<option value="turkish" class="turkish-f">Turkish (f)</option>
<option value="" class=""></option>
<div style="height: 50px;"></div>
<input id="multi" type="text" />
<br class="clear" />
<div id="footer2">
If you find any errors, please submit an <a href="">issue</a>.<br>
Or if you would like to contribute a layout, please email me at <a href="%6D%61%69%6C%74%6F%3Aw%6Fwm%6Ftty%40g%6Dail%2Ec%6Fm">wowmotty a&#116; &#103;&#109;&#97;&#105;&#108; d&#111;t c&#111;m</a>
Jump to Line
Something went wrong with that request. Please try again.