Five implementation variants of the Virtual Cyrillic Keyboard

Virtual Cyrillic Keyboard (Russian and Ukrainian): implementation variants

Original Virtual Keyboard: http://WinRus.com/keyboard.htm

On this page you'll find five variants (with working examples) and short instructions - Keyboard will attach itself to the input area(s) on the existing page of your site/forum/Guest Book; user calls Keyboard by clicking on a button or a link on that page.

Note. There are other variants - when Keyboard is initially present on screen: Keyboard is on a separate page; Keyboard in a separate pop-up window, etc..
Details about all the variants - these 5 and other - on the page tstKbd_e.htm: each with a working example there too.

Conditions of the usage of the Keyboard on your site are also specified there.
Practically each variant of calling the Keyboard has been already used on various sites and forums (ask me if you want the links to such sites/forums to see how it works).

All the files are within vkb_use.zip archive.

The only thing needed from that .zip to apply the Keyboard onto your site is a folder (directory) vkb .

By default (because it's the most common case) the Keyboard on some page takes needed files from the SUB-folder vkb of that page's place.
That is, say Keyboard working on A.html page located at abc.com/~mike/A.html
will look for its files at abc.com/~mike/vkb
If you open in an editor the main JavaScript file of the vkb folder - vkb_load.js - you'll see that Default path at the very top:

vkb_Path = "vkb/";

If that path is not good for you - for example, you want to insert Keyboard button on several pages located in different folders, say

abc.com/A.htm
abc.com/site1/B.htm
abc.com/site2/C.htm

then you need a different path:

vkb_Path = "/vkb/";

that is, wherever a page with Keyboard is located, the Keyboard will look for its files in the folder vkb located in the root directory.

Such (or another) custom value for the path to the vkb folder can be set via vkb_Path parameter:

either by setting such parameter in the "parameters list" line in HTML file of the page where Keyboard is to work ("parameters list" line is discussed below)
or, if it's the only parameter you need and thus you don't want to create "parameters list" line in HTML file just for that single parameter, then you can change the value of vkb_Path directly in the file vkb_load.js - it's purposely located right at the top of that file

If you install one of the variants on your site then please send me e-mail (remove blank spaces before and after '@'): PaulGor @ compuserve.com with the Web-address of the site/forum where you did so.

Each of these 5 variants of "attaching" Keyboard to a page involve the following minimal additions to your existing page (two lines minimum):

1 or 2 lines to be inserted into the <HEAD> section of your HTML text
and
1 or 2 lines (more for variant #1) - below your input area HTML statemenent:
one line is a button to call Keyboard - for you to be able to change design/color/position of that button;
Variants 3 and 4 have one more line that specifies a "frame" (<div>) where Keyboard is shown - it has to be right below the calling button, so it is necessary to have such line there.

1 or 2 lines to be inserted into the <HEAD> section of your page

Let's start from 2nd line:

Second line in the <HEAD> section looks the same in all five variants (loads JavaScript and CSS files of the Keyboard):

<script type='text/javascript' src='vkb/vkb_load.js' charset='windows-1251'></script>

"windows-1251" for vkb_load.js means that:

page (HTML) that has Keyboard attached is a page of "Cyrillic(Windows)" encoding (which is the case for 5 example HTML for Keyboard implementation variants given at the bottom of this page and also - same example files - in vkb_use.zip)
and thus
Cyrillic texts in .js files within vkb folder are of "Cyrillic(Windows)" encoding

If you situation is different and your page (HTML) where you want to have this Keyboard, is a UTF-8 encoding page, then you need different set of Keyboard's .js files - with Cyrillic in UTF-8 and not in windows-1251 encoding:

That line in <HEAD> section should contain "utf-8" instead of "windows-1251"
to provide for such case, vkb_use.zip contains a separate folder UTF-8 with those JavaScript files that contain UTF-8 Cyrillic
you need to copy all .js files from UTF-8 folder to the Keyboard's folder vkb overriding .js with the same names located there (because they contain windows-1251 texts)

After that all .js in vkb that have Cyrillic texts in them, will have it as UTF-8 Cyrillic texts - to be used on UTF-8 Web pages.

First line (which may not be needed) in the <HEAD> section of your HTML is for you to specify Parameters (almost all - non-mandatory), for example:

<script type="text/javascript">vkb_Variant=1; vkb_InterfaceLanguage='E';</script>

Parameters (almost all are optional ):

JavaScript files are loaded and used based on the Variant you choose (working examples for each are provided below).
1st parameter is a variant number, for example:
vkb_Variant = 1;

Default is 2. Working examples of all the variants are given below.
You can decide whether you want to have non-US keyboards option
(what is that? See how it works on http://WinRus.com/keyboard.htm where you find "If your physical keyboard is not US English" link to the details).
If you do need such functionality, then the parameters line will have this one
vkb_nonUS=true;

Default is "false", that is, no such option as non-US keyboards.
You can decide whether the interface of Keyboard (comments on screen, names of layouts, tool tips, etc.) be Russian or English
Default is Russian, so if you want English interface, then the parameters line should have this one
vkb_InterfaceLanguage='E';
You can decide if you want an opposite input option - "To latin letters" - when you type Russian using regular system keyboard, with "RU" in the task bar, but on your screen you get a transliteration such as "privet" (see how it works on the Keyboard's page at на http://WinRus.com/keyboard.htm)
It's needed sometimes for SMS or for older Chat programs that don't work with Cyrillic:
vkb_ToLatin=true;

Default is "false", that is, no such option presented.
You can decide what Cyrillic layout you want to have at a keyboard's start-up.
That is, for US or non-US keyboard modes: one of the Standard layouts or one of the Phonetic (homophonic) layouts, for example, if you want Standard Russian layout:
vkb_KbdVariant='30';

Default (for English-interface) is "5" (Phonetic layout - AATSEEL 'Student').

Note. If the layout you want at start-up is one for a non-US keyboard mode, then do not forget to setup also vkb_nonUS=true; (that parameter was descibed earlier).

Here is the full list of numeric values that could be used for this parameter: Parameter: start-up keyboard layout
You can decide - for Variant 2 where Keyboard is shown in a frame - whether you want the frame to be movable (which is default)
or to have it as fixed-position frame even when a user scrolls the page horizontally or vertically.
Fixed position is useful for the situation with many input fields (filling out a form), where non-fixed-position frame would cause a user tedious moving of Keyboard's frame (in several steps) called below the last field, to the top field. While with the fixed-position option it's very easy - scroll the page and you are there, at the top.
If you do need fixed-position option for Variant 2, then the parameters line will have this one
vkb_Fix=true;

Default is "false", that is, the frame is movable in Variant 2.
Service files of the Virtual Keyboard are located in the vkb folder and by default the path to this folder is
vkb_Path = "vkb/";

If you want to setup a different path you can provide a value for this parameter in the "parameter list" line of HTML file of the page where Keyboard is to work (this was discussed in more details at the top of this page)
You can decide whether you want to have "On" as an initial, start-up setting for the main "Cyrillic via keyboard" functionality.
For example, in Variant 1 which will be described below, you may want to have "Off" as a start-up setting - otherwise users who do NOT need Virtual Keyboard and use regular system keyboard tools for Cyrillic input, will be confused having both working (until such user figures out that s/he needs to turn Virtual Keyboard to "Off").
If you want to have "Off" as an initial, start-up setting, then the parameters line will have this one
vkb_CyrOnOffInit=false;

Default is "true", that is, "Cyrillic via keyboard" is 'On'.

As you see - based on defaults - there is no need for Parameters line at all for
the Russian-interface Variant 2 without non-US keyboard:
your <HEAD> section then contains just one line - for loading JavaScript and CSS files.

You can see/copy those lines that 'attach' Keyboard to the input fields (and then prepare parameters as you wish) -
lines in both <HEAD> (Part 1) and below input area (Part 2) in the .htm files of working examples here
(those lines are easy to find - there are comments surrounding them -
"Part 1 of Virtual Keyboard code" and "Part 1 of Virtual Keyboard code"):

Five variants fo Keyboard working right in the calling page (four main variants and 2nd one has two sub-variants, so it's five alltogether):

Variant 1. Keyboard is shown in a 'moving frame', but one can type Cyrillic even when the frame is not present on the screen:
vkb_Fly1.htm - Russian interface; vkbFly1e.htm - English interface
Note. Remember, that initial setting of keyboard-based input ("On" or "Off") is controlled by parameter vkb_CyrOnOffInit described above (it was used in English-interface example to have "Off" as a default)
Variant 2. Keyboard is shown in a 'frame'. One can type Cyrillic only when the frame is present on the screen.
There are two sub-variants:
- It's a 'moving frame' - one can relocate the frame using mouse: vkb_Fly2.htm - Russian interface; vkbFly2e.htm - English interface
  
  There is a Mode for SMF-forum made using this variant (with "On" for parameters 2 and 4, but it's modifiable), you can find more details in the Russian version of this page.
- It's a 'fixed position' frame, despite page scrolling, i.e. Parameter 5 is set (see above): vkb_Fix.htm - Russian interface; vkbFix_e.htm - English interface
Variant 3. Keyboard is shown in a 'frame' that appears right below its calling button:
vkb_Box1.htm - Russian interface; vkbBox1e.htm - English interface
Variant 4. Same as Variant 3, just for shorter input areas - Keyboard's frame takes less space horizontally:
vkb_Box2.htm - Russian interface; vkbBox2e.htm - English interface

Based on the Variant selected and some other parameters (such as Interface Language) you decided to use on your site, you can remove unneeded files in vkb folder (directory) after you open vkb_use.zip archive before placing that folder on your server:

file vkbfly.js - only for Variants 1 and 2; Russian Interface
file vkbfly_e.js - same, with English Interface
file vkbbox.js - only for Variants 3 and 4, Russian Interface
file vkbbox_e.js - same, with English Interface
file vkfix.css - CSS for sub-variant 2 of Variant 5 (fixed-position Keyboard frame)
file vkbfixie.css - addition to the above for Internet Explorer
if you decide that you do not want "non-US keyboard modes" option, then you can delete entire sub-folder non-US located within vkb folder (otherwise see Parameter 2 explanation above)

Paul Gorodyansky
"Cyrillic (Russian): instructions for Windows and Internet":
http://WinRus.com
some responses from readers

Did you like it? You can make a donation by clicking here
(opens in new window):