Language

Wiki Pages: Home | FAQ | Setup | Options ( Layout, Language, Useability, Actions ) | Methods | Theme | Log

css - [Object] Class names used to make the keyboard work with jQuery UI theming.

• This variable contains the class names needed to apply a jQuery UI theme to the keyboard.

• Because of the methods used by the jQuery Mobile theme, it would be best to either clear out all of these class names, or just not load the jQuery UI stylesheet on mobile devices.

• The default values are as follows:

  css : {
    // input & preview styles
    input          : 'ui-widget-content ui-corner-all',
    // keyboard container - this wraps the preview area (if `usePreview` is true) and all keys
    container      : 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
    // default keyboard button state, these are applied to all keys, the remaining css options are toggled as needed
    buttonDefault  : 'ui-state-default ui-corner-all',
    // hovered button
    buttonHover    : 'ui-state-hover',
    // Action keys (e.g. Accept, Cancel, Tab, etc); this replaces the "actionClass" option
    buttonAction   : 'ui-state-active',
    // used when disabling the decimal button {dec} when a decimal exists in the input area
    buttonDisabled : 'ui-state-disabled'
  },

display - [Object] Button language / symbol options

• Change the displayed button text by modifying the value, in the 'key':'value' pair, with the text or symbol you want to use.

• The value portion can have another colon ":" inside (e.g. '\u21e5:Tab'). Anything left of the colon will appear on the virtual keyboard button. Anything to the right will be added to the title and appear while hovering over the button.

• The default values are shown in the following list. The abbreviated names contain only a symbol so as to fit the layout style as desired:

  • 'a' : '\u2714:Accept (Shift-Enter)' - Alternate accept button - unicode for check mark symbol
  • 'accept' : 'Accept:Accept (Shift-Enter)' - Accept button text
  • 'alt' : 'AltGr:Alternate Graphemes' - Alt button text (AltGr is for international key sets)
  • 'b' : '\u2190:Backspace' - Alternate backspace button - unicode for left arrow. Same as ←
  • 'bksp' : 'Bksp:Backspace' - Backspace button text
  • 'c' : '\u2716:Cancel (Esc)' - Alternate cancel button - unicode for big X
  • 'cancel' : 'Cancel:Cancel (Esc) - Cancel button text
  • 'clear' : 'C:Clear' - Clear window content (used in num pad)
  • 'combo' : '\u00f6:Toggle Combo Keys' - Toggle combo (diacritic) key
  • 'dec' : '.:Decimal' - Decimal point for num pad (optional), change '.' to ',' for European format
  • 'e' : '\u21b5:Enter' - Alternate enter button - unicode for down, then left arrow (enter symbol)
  • 'enter' : 'Enter:Enter' - Enter button text
  • 'lock' : '\u21ea Lock:Caps Lock' - Caps lock button - unicode for double lined up arrow
  • 's' : '\u21e7:Shift' - Alternate shift button - unicode for a thick up arrow
  • 'shift' : 'Shift:Shift' - Shift button text
  • 'sign' : '\u00b1:Change Sign' - Change sign (used in num pad) - unicode for a +- symbol
  • 'space' : ' :Space' - Space button text
  • 't' : '\u21e5:Tab' - Alternate tab button - unicode for right arrow to bar (used since only one directional tabs available)
  • 'tab' : '\u21e5 Tab:Tab' - Tab button text (Note: \u21b9 is the true tab symbol (left & right arrows) but not used here)

alwaysOpen - [Boolean] Keyboard will always remain visible.

• When true, the keyboard will automatically open on page load and remain open, even after clicking accept or hitting the escape key.
• When false, the keyboard will behave as it does normally. It opens when the input/textarea has focus and closes when focus is lost or the escape key, accept or cancel button is pressed.
• Default is false.

stayOpen - [Boolean] Keyboard remains open when input loses focus.

• When true, the keyboard will not automatically close when the input loses focus. It will close when another keyboard is opened or if the user presses accept, cancel or escape.
• If false, the keyboard will automatically close when the input loses focus, or the user presses accept, cancel or escape.
• Default is false.

usePreview - [Boolean] Include a preview input or use the original.

• When true, a preview input (clone of the original input) will be included above the virtual keyboard and the entire keyboard will overlay the original input (if the default position is used).
• When false, the keyboard will position itself under the original input, if the default positioning is used, so the user is typing directly into the original input.
• Default is true.

wheelMessage - [String] Message to tell users about the hidden feature

• This message is only added when a key on the keyboard is hovered over.
• The text is added to the title attribute of the key, so if you want to have a tooltip attached to it. You will probably need a 'live' tooltip that targets the 'ui-keyboard-button' class.
• Default message is 'Use mousewheel to see other keys'.

##Deprecated

actionClass - [String] Class name used to make keys a different color

• This variable contains the class that is only added to the Accept and cancel buttons to give them a different color from the normal keys.
• It was originally set to 'ui-state-highlight' which looks good in some themes, but not others.
• This class name can also be a custom one that you set up for these keys as well.
• Default is 'ui-state-active'.
• This option has been replaced by buttonAction within the css option.