Getting Started

Web Keyboards is shipped with only one javascript file. Follow the installation instructions to download the appropriate file prebuild for your language and add it to your pages. If you cannot find your language in the list or you need a custom combination of keyboards please contact us for assistance.

Usage

At the end of the Web Keyboards script there is a call to webKeyboards.init() which initializes the script and attaches all the handlers. You may customize the appearance and behavior of the switch using configuration options. Any setting of configuration options must happen before the call to init().

By default Web Keyboards affects all text input elements on the page. You can have it affect only specific INPUT or TEXTAREA elements by adding the attribute webk (webk="webk") to those elements. All other text input elements on the page will be ignored.

Configuration Options

Using the config object you can override any of the default options below.

webKeyboards.config = {
  // The CSS used to style the button and menu
  CSS: "#kbs input{width:25px;padding:3px;cursor:pointer;\
  font:bold 12px Arial,verdana;border:#000 1px solid;color:#fff}#kb-menu{}",
  // A array of keyboard layout configuration objects
  layouts: [],
  // Show keyboard menu option
  show: "Show layout ...",
  // Button tooltip
  tip: "",
  // Default initial layout index
  initialSelection: 0
}
						

• CSS - The CSS used to style the switch button and menu.
• layouts - An array of keyboard layout configuration objects. For example:

  webKeyboards.config.layouts = [
   { code: "", name: "Îñíîâíàÿ êëàâèàòóðà", translator: kbcy, color: "#000099"},
   { code: "RP", name: "Ðîññèéñêàÿ ôîíåòè÷åñêàÿ", translator: kbcy, color: "#BA0B0B"},
   { code: "RU", name: "Ðîññèéñêàÿ ñòàíäàðòíàÿ", translator: kbcy, color: "#fcb711"}
  ];								
  								

  The layout object's translator property should be set to a keycode mapping function for that layout.
• show - The caption for the menu option which displays the currently selected keyboard layout. May be used to provide a translation of the menu option label.
• tip - The button tooltip text which is appended after the name of the currently selected keyboard layout and assigned to the title attribute of the button. May be used to provide a translation of the tooltip.
• initialSelection - The index of the layout selected by default. After the user has used the switch to select a different layout, the user's choice is stored in a cookie and used during the current browser session.

Methods

• init() - Initializes the webKeyboards object by attaching handlers, etc. Note that this method is called at the end of the prebuild scripts. If you need to customize configuration options you would need to comment that line out and call webKeyboards.init() after your customization code.
• selectLayout(layoutIndex) - Sets the current layout to the layout at the specified index in the config.layouts array.
• showLayout() - Displays the currently selected layout in a popup.