Home

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

Contents

• Features
• Keyboard Layout References
• Main Demos
• Playgrounds
• More Demos
  • Themes
  • Layout
  • Custom Keys
  • Manipulating text
  • How-to
  • Use with editors
  • Implemented
• Known Problems
• Licensing

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.

• Attach a keyboard to inputs, textareas or contenteditable elements (added in v1.27.0).

• 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 diaresis, 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 an optional dependency, 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.

Keyboard Layout References

• http://ascii-table.com/keyboards.php
• https://docs.microsoft.com/en-us/globalization/windows-keyboard-layouts
• http://www.greywyvern.com/code/javascript/keyboard
• https://en.wikipedia.org/wiki/Keyboard_layout & various keyboard specific layouts (e.g. Romanian keyboard layout)
• http://gate2home.com/
• http://www.google.com/webelements/virtualkeyboard/ (which sadly no longer exists)
• Users, like you 😸

Main Demos

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

Playgrounds

• Basic Keyboard Playground
• Alt-keys Popup.
• Autocomplete (custom autocomplete widget).
• Caret (includes extra css for password preview).
• Extender & Extender with multiple layouts; see #505 & #510.
• Navigation.
• Preview Keysets.
• Scramble.
• Typing.
• Sorry, no Mobile extension demo because it doesn't like jsFiddle.

More Demos

NOTE

If the demo you open doesn't appear to work, change the jQuery version from "Edge" to something like v1.9.1 - only because JSFiddle doesn't show an option to load jQuery UI until you choose that version - but the keyboard itself should work for all jQuery versions; it's jQuery UI - the keyboard uses the position utility if you set the option - that doesn't work with jQuery 3.4.1+.

Themes

• Basic Light using keyboard-basic.css.
• Basic Dark using keyboard-dark.css.
• Bootstrap theme. This demo shows how you can use Bootstrap class names to style your keyboard.
• Bootstrap dark theme. This demo uses Bootswatch Dark theme.

Layout

• Keyboard at bottom of page (jQuery UI position utility not loaded).
• Donation Form Demo - This demo adds a "next" and "prev" button to allow switching between inputs in a form.
• Change "Next" button text to "Submit" on last input. See issue #524.
• Different sized key - position the key absolutely/relatively inside the keyset, it is possible to add different shaped keys as well, but you'll have to use a background image, and add a hover state.
• Enter serial number in sequence. See issue #172.
• Enter phone number in sequence (set up for U.S. phone numbers).
• Make keyboard draggable - add a bar across the top of the keyboard and use that as a handle to make the keyboard draggable.
• Swap layout based on external link. See issue #333.
• Swap layout based on custom action keys. See issues #532 &amp #547.
• Multiple keyboards with different styles. See issue #378.

Custom keys

• Custom Action Key - Add double exclamation points (!!) to the action key name only in the layout to make the key stand out.

Manipulating text

• Select Text - Select all text when keyboard opens.
• Capitalizing - Captialize first letter and letters immediately after a '. ' (period + space). See issue #428.
• Wrap selected text - this demo shows you how to wrap selected input. As if wrapping text with a <strong> tag.
• Numpad with fractional value keys (limited use version) - Include a toggle button to add or subtract fractional values from the current (see issue #237).
• Numpad limits to two decimal places - Allow the user to enter any numbers, but limit to two decimal places - see issue #243.
• Numpad limits integer and fractional parts - Set max integer and max decimal parts separately. See issue #608.
• Include units - This demo automatically adds & removes any units in the input (e.g. "100 km"). See issue #270.
• Numpad with auto-inserted commas. See issue #467.
• Remap keys using beforeInsert. See issue #470.
• Delete previous word. See issue #756.

How-to

• Use FontAwesome icons as custom css or html (action keys only). See issue #701.
• Multiple inputs - Stacking keyboards to make it appear there is one keyboard.
• Auto close after input - Only one state can be entered.
• Restricted input - A demo with long words, restricted input and no pasting allowed.
• Add class to input when keyboard opens - Ohh pretty red input!
• Using enterNavigation - Use tab or enter to shift to the next input/textarea.
• Add clicky noise - This only adds a click sound while clicking or touching the virtual keyboard keys. See issue #135.
• Using a keyboard within a dialog - Using jQuery UI Dialog. See issue #335.
• Disable Accept & Bksp keys when preview is empty.
• Use with select2. See Stackoverflow.
• Use with chosen. See issue #737.
• Zoom in initially for caret placement; using AnythingZoomer.
• Toggle stickyShift with a long click on the shift key.
• Use with Bootstrap Typeahead autocomplete script.
• Use inside Bootstrap modal. See issue #462.
• Enable keyboard after it becomes visible. See issue #426.
• Double click meta keys to activate. See issue #474.
• Use with Handsontable. See issue #523.
• Open calculator in a popup window.
• Dynamically resize keys based on the viewport. See issue #538.
• Close keyboard after a certain amount of time due to user inactivity. See issue #612.
• Type on hover. See issue #589.
• Add text or trigger action on mouseover. See issue #626.
• Edit table cell content using dynamically added input. See issue #638.
• iFrames (The iframe must be on the same domain as the parent!):
  • Attach keyboard to child iframe input. See issue #230.
  • Show keyboard in parent of iframe. See issue #622.
• Use with Twitter typeahead. See issue #720.
• Use with DataTable's search. See issue #300.
• Replace multiple words dynamically. See issue #769.
• Use select to change layout dynamically. See issue #778.
• Keyboard pattern unlock. See issue #782.
• Add a blurred backdrop. Note backdrop-filter is not supported by all browsers by default. See issue #802.

Use with editors

• Use with Codemirror. May not be fully implemented! See issues #306 and #551; thanks jsbain and @Tophgirl!
• Use with Ace editor. See issue #306; thanks @knod!
• Use with summernote. See issue #712.

Implemented

• Touch key auto-repeat - Simulate keydown repeating character with touchstart/mousedown. This is now built into version 1.9+.
• Move caret with virtual arrow keys - Action keys added in version 1.17.10.
• Lock/unlock physical keyboard input. See issue #144.
• Reset keyset - Make sure the default keyset is showing when the keyboard opens - implemented, see resetDefault option.

Known Problems

• All browsers: Only inputs of type "text", "search", "url", "telephone" and "password" support caret positioning (ref). Using this keyboard with any other input type will break the caret left/right, backspace and delete keys (see issue #241 for details).
• Caps Lock: There is no reliable cross-browser 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.