Skip to content
This repository

Originally posted by Jeremy Satterfield in his blog, jQuery plugins and on Snipplr.

Features (Demo)

  • An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
  • The user can then type and preview their input before Accepting or Canceling.
  • Add custom keyboard layouts easily.
  • Add up to four standard key sets to each layout that use the shift and alt keys (default, shift, alt and alt-shift).
  • Add any number of optional modifier keys (meta keys) to add more key sets.
  • Each meta key set also includes the shift, alt and alt-shift keysets - New in version 1.8.9.
  • Position the keyboard in any location around the element, or target another element on the page.
  • Easily modify the key text to any language or symbol.
  • Allow direct input or lock the preview window.
  • Set a maximum length to the inputted content.
  • Scroll through the other key sets using the mouse wheel while hovering over a key to bypass the need to use alt, shift or meta keys.
  • Easily type in characters with diacritics. Here are some default combination examples - it is possible to add more.

    • ' + vowel ( vowel with acute accent, e.g. ' + e = é )
    • ` + vowel ( vowel with grave accent, e.g., ` + e = è )
    • " + vowel ( vowel with diaeresis, e.g., " + e = ë )
    • ^ + vowel ( vowel with circumflex accent, e.g., ^ + e = ê )
    • ~ + certain letters ( letter with tilde, e.g. ~ + n = ñ, ~ + o = õ )
  • Enable, disable or add more diacritic functionality as desired.

  • Use callbacks and event triggers that occur when the keyboard is open or closed and when the content has been accepted or canceled.
  • ARIA support (may not be fully implemented)
  • As jQuery UI is a dependancy, this plugin's styling will automatically match the selected jQuery UI theme with the exception of the required CSS listed below.
  • Built in watermarking. Emulates HTML5 placeholder if the browser doesn't support it.
  • Typing extension allows you to simulate typing into the keyboard for demo purposes or to assist user input.
  • Autocomplete extension will integrate this keyboard plugin with jQuery UI's autocomplete widget.
  • Multiple region specific keyboard layouts included in a separate directory. This is a work in progress and slowly growing.

Main Demos

  • Main demo - Include demos of almost all of the keyboard features
  • Basic demo - Use this as a starter for any project.
  • Layouts - Different language layouts (slowly adding more).
  • Navigate extension - A demo of the navigation extension; press F1 to toggle modes.
  • Mobile extension - A demo using jQuery mobile and it's themes.
  • Calculator - My feeble attempt at making a scientific calculator.

More Demos

Known Problems

  • Caps Lock: There is no reliable way to detect the state of the caps lock key. Although the plugin can detect the differences in the characters while actively typing, the shift key on the virtual keyboard may not reliably display this state.
  • Autocomplete: When using the autocomplete extension and the suggestion window is open, pressing the up or down arrow keys too fast will reset the list.
  • IE: In a textarea with multiple (more than three) carriage returns, repositioning the caret near the end of the content will add the following clicked keys at the end.
  • Opera: When pressing the tab key while inside a textarea, all browsers but Opera add the tab to the virtual keyboard input.

Licensing

  • Keyboard code & extensions: MIT License
  • Caret code by C. F., Wong (Cloudgen): MIT License
  • Layout files: Most are under WTFPL, unless the file itself specifies otherwise.

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

Something went wrong with that request. Please try again.