Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Setup

Mottie edited this page · 51 revisions

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

Page Head

<!-- jQuery & jQueryUI + theme -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

<!-- keyboard widget css & script -->
<link href="css/keyboard.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.keyboard.js" type="text/javascript"></script>

<!-- keyboard optional extensions -->
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js" type="text/javascript"></script>

CSS (from the keyboard.css file)

.ui-keyboard { padding: .3em; position: absolute; left: 0; top: 0; z-index: 16000; }
.ui-keyboard div { font-size: 1.1em; }
.ui-keyboard-button { height: 2em; width: 2em; margin: .1em; cursor: pointer; overflow: hidden; }
.ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; }
.ui-keyboard-button-endrow { clear: left; }
.ui-keyboard-widekey { width: 4em; }
.ui-keyboard-space { width: 15em; text-indent: -999em; }
.ui-keyboard-preview { text-align: left; margin: 0 0 3px 0; display: inline; } /* width: 100%; now full window width in IE =( */ 
.ui-keyboard-keyset { text-align: center; }
.ui-keyboard-input { text-align: left; }
.ui-keyboard-input.placeholder { color: #888; }
.ui-keyboard-nokeyboard { color: #888; border-color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */

/* only used in IE to prevent clicking in another input/textarea */
.ui-keyboard-overlay { height: 100%; width: 100%; background: transparent; position: absolute; top: 0; left: 0; z-index: 15999; }
.ui-keyboard-overlay-input { position: relative; top: 0; left: 0; zoom: 1; z-index: 16000; } /* put input above overlay if preview is not used - IE only */

/* combo key styling - toggles diacritics on/off */
.ui-keyboard-button.ui-keyboard-combo.ui-state-default { border-color: #ffaf0f; }

HTML

<!-- placeholder attribute adds a watermark to the input/textarea; Added by the plugin if the browser doesn't support HTML5 -->
<textarea id="keyboard" placeholder="Enter Text..."></textarea>

Script (showing defaults)

$('#keyboard').keyboard({

  // *** choose layout ***
  layout       : 'qwerty',
  customLayout : { default: ['{cancel}'] },
  position     : {
    of : null, // optional - null (attach to input/textarea) or a jQuery object (attach elsewhere)
    my : 'center top',
    at : 'center top',
    at2: 'center bottom' // used when "usePreview" is false (centers the keyboard at the bottom of the input/textarea)
  },

  // preview added above keyboard if true, original input/textarea used if false
  usePreview   : true,

  // if true, keyboard will remain open even if the input loses focus.
  stayOpen     : false,

  // *** change keyboard language & look ***
  display : {
    'a'      : '\u2714:Accept',      // check mark - same action as accept
    'accept' : 'Accept:Accept',
    'alt'    : 'AltGr:Alternate Graphemes',
    'b'      : '\u2190:Backspace',   // Left arrow (same as &larr;)
    'bksp'   : 'Bksp:Backspace',
    'c'      : '\u2716:Cancel',      // big X, close - same action as cancel
    'cancel' : 'Cancel:Cancel',
    'clear'  : 'C:Clear',            // clear num pad
    'combo'  : '\u00f6:Toggle Combo Keys',
    'dec'    : '.:Decimal',          // decimal point for num pad (optional) - if used, only one decimal point is allowed
    'e'      : '\u21b5:Enter',       // down, then left arrow - enter symbol
    'enter'  : 'Enter:Enter',
    's'      : '\u21e7:Shift',       // thick hollow up arrow
    'shift'  : 'Shift:Shift',
    'sign'   : '\u00b1:Change Sign', // +/- sign for num pad
    'space'  : 'Space:Space',
    't'      : '\u21e5:Tab',         // right arrow to bar (used since this virtual keyboard works with one directional tabs)
    'tab'    : '\u21e5 Tab:Tab'      // \u21b9 is the true tab symbol (left & right arrows)
  },

  // Message added to the key title while hovering, if the mousewheel plugin exists
  wheelMessage : 'Use mousewheel to see other keys',

  // Class added to the Accept and cancel buttons (originally 'ui-state-highlight')
  actionClass  : 'ui-state-active',

  // *** Useability ***
  // Auto-accept content when clicking outside the keyboard (popup will close)
  autoAccept   : false,

  // Prevents direct input in the preview window when true
  lockInput    : false,

  // Prevent keys not in the displayed keyboard from being typed in
  restrictInput: false,

  // Prevent pasting content into the area
  preventPaste : false,

  // Set the max number of characters allowed in the input, setting it to false disables this option
  maxLength    : false,

  // Event (namespaced) on the input to reveal the keyboard. To disable it, just set it to ''.
  openOn       : 'focus',

  // When the character is added to the input
  keyBinding   : 'mousedown',

  // combos (emulate dead keys : http://en.wikipedia.org/wiki/Keyboard_layout#US-International)
  // if user inputs `a the script converts it to à, ^o becomes ô, etc.
  useCombos    : true,

  // *** Methods ***
  // Callbacks - attach a function to any of these callbacks as desired
  initialized : null,
  accepted    : null,
  canceled    : null,
  hidden      : null,
  visible     : null,
  beforeClose : null

});

Extensions - make sure you include the appropriate script in the head (see above)

Autocomplete - integrate with jQuery UI Autocomplete

// target a specific keyboard, or use $('.ui-keyboard-input') to target all
$('#keyboard1')
  .keyboard(options1)     // keyboard plugin - see the full list of options above.
  .autocomplete(options2) // jQuery UI autocomplete - go to http://jqueryui.com/demos/autocomplete/ for a complete list of options.
  .addAutoComplete();     // keyboard autocomplete extension, there are no options.

Typing - Simulate typing into the keyboard (tutorials or assist user input)

// Setup: targeting a specific keyboard, or use $('.ui-keyboard-input') to target all
$('#keyboard1')
  .keyboard(options)
  .addTyping();
// Usage: el.reveal().typeIn('text', time, callback);
// 'text' will be entered into the keyboard, time is the time in milliseconds between
// key strokes, the callback is called when completed.
// the following will type in the text with a 500ms delay then accept and close the keyboard when done.
var kb = $('#keyboard-input').getkeyboard();
kb
  .reveal()
  .typeIn('This is a test', 500, function(){ kb.accept(); });

Navigation - Allows navigating the virtual keyboard using the arrow keys (use F1 to toggle the mode)

CSS needed to better highlight the action keys (shift, enter, accept, etc)

/* Add this css so we can see when the action (orange) keys are highlighted */
.ui-keyboard-button.ui-state-active.ui-state-hover {
  border: 1px solid #fff;
  -moz-box-shadow: 1px 1em 1px #ffba2b inset;
  -webkit-box-shadow: 1px 1em 1px #ffba2b inset;
  box-shadow: 1px 1em 1px #ffba2b inset;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus {
  border-color: #59b4d4;
}

Javascript

$('#keyboard')
  .keyboard(options)
  .addNavigation({
    position   : [0,0],     // set start position [row-number, key-index]
    toggleMode : false,     // true = navigate the virtual keyboard, false = navigate in input/textarea
    toggleKey  : 112,       // toggle key; F1 = 112 (event.which value for function 1 key)
    focusClass : 'hasFocus' // css class added to the keyboard when toggle mode is on
  });
Something went wrong with that request. Please try again.