Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Setup

Mottie edited this page · 52 revisions

Wiki Pages: Home | FAQ | Setup | Options ( Layout, Language, Useability ) | 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>
  <script src="js/jquery.mousewheel.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.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; } /* this will change the overall keyboard size */
  .ui-keyboard-button { height: 2em; width: 2em; margin: .1em; cursor: pointer; }
  .ui-keyboard-widekey { width: 4em; }
  .ui-keyboard-space { width: 15em; }
  .ui-keyboard-preview { width: 100%; text-align: left; margin-bottom: 3px; }
  .ui-keyboard-keyset { text-align: center; }
  .ui-keyboard-input { text-align: left; }
  .ui-keyboard-input.placeholder { color: #888; }
  /* 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; }
  • HTML
  <!-- placeholder attribute adds a watermark to the input/textarea, overridden by HTML5 if supported -->
  <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'
    },

    // *** 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
      '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,

    // 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
    accepted : null,
    canceled : null,
    hidden   : null,
    visible  : 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)
  .typing();

 // Usage: el.reveal().typeIn('text', time, callback);
 // 'text' will be entered into the keyboard, time is the time in milliseconds between key strokes, 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(); });
Something went wrong with that request. Please try again.