PHPackages mottie/keyboard - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mottie/keyboard ActiveComponent[Utility & Helpers](/categories/utility) mottie/keyboard =============== A jQuery on-screen keyboard (OSK) plugin that works in the browser. v1.30.4(4y ago)1.8k31722[113 issues](https://github.com/mottie/keyboard/issues)MITJavaScript Since Jul 30Pushed 3y ago81 watchersCompare [ Source](https://github.com/mottie/keyboard)[ Packagist](https://packagist.org/packages/mottie/keyboard)[ Docs](https://github.com/Mottie/Keyboard)[ RSS](/packages/mottie-keyboard/feed)WikiDiscussions master Synced 2mo ago READMEChangelogDependencies (1)Versions (52)Used By (0) [![keyboard logo](./docs/css/images/keyboard-logo.png)](./docs/css/images/keyboard-logo.png)A jQuery on-screen keyboard (OSK) plugin that works in the browser. Originally posted by Jeremy Satterfield in his [blog](http://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html), [jQuery plugins](http://plugins.jquery.com/project/virtual_keyboard) and on [Snipplr](http://snipplr.com/view/21577/virtual-keyboard-widget/). Currently maintained by [Mottie](https://github.com/Mottie/Keyboard). [![NPM Version](https://camo.githubusercontent.com/447d8922fef7baaeabbaaa2def80cc4eecdeb912d7a7aa530824e800a2135b3e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f7669727475616c2d6b6579626f6172642e737667)](https://npmjs.org/package/virtual-keyboard) [![devDependency Status](https://camo.githubusercontent.com/e8ad5b12c8b0b055971741bf04464828d02154f20818687cea81c558ebe1b736/68747470733a2f2f64617669642d646d2e6f72672f4d6f747469652f6b6579626f6172642f6465762d7374617475732e737667)](https://david-dm.org/Mottie/keyboard?type=dev) [![Join the chat at https://gitter.im/Mottie/Keyboard](https://camo.githubusercontent.com/abe08b740a4156153736f791393ec4da6619c4be73212e75769f52edacc0e2b5/68747470733a2f2f6261646765732e6769747465722e696d2f4a6f696e253230436861742e737667)](https://gitter.im/Mottie/Keyboard?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)[![FOSSA Status](https://camo.githubusercontent.com/92c696ba09090965d4df9b5c55e6ed5086993726f6a962d7b0b4ebf9688ca90f/68747470733a2f2f6170702e666f7373612e696f2f6170692f70726f6a656374732f6769742532426769746875622e636f6d2532464d6f747469652532464b6579626f6172642e7376673f747970653d736869656c64)](https://app.fossa.io/projects/git%2Bgithub.com%2FMottie%2FKeyboard?ref=badge_shield) Features ([Demo](https://mottie.github.io/Keyboard/)) ----------------------------------------------------- [](#features-demo) ### Ease of use [](#ease-of-use) - 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. - It can be set to always remain open, and to not use a preview. ### Ease of installation [](#ease-of-installation) - Grab the files as a zip, or from npm - see the [installation](#installation) section below. - In a minimal setup, the keyboard works by including: - jQuery - jQuery UI theme - (optional) jQuery UI position utility to position the keyboard at the input/textarea element - Initialize keyboard - no options needed for qwerty keyboard. ### Ease of setup [](#ease-of-setup) - Attach a keyboard to inputs, textareas or contenteditable elements. - Add custom keyboard layouts easily. - Multiple region specific keyboard layouts included in a separate directory. This is a work in progress and slowly growing. - 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 can also include the shift, alt and alt-shift keysets. - Position the keyboard in any location around the element, or target another element on the page (using jQuery UI position utility). - 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: - `'` + 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 changed, been accepted or canceled. - Includes ARIA support (may not be fully implemented). - Built in watermarking. It emulates HTML5's placeholder, if the browser doesn't support it. - Include validation using a callback function so third-party validation methods can be used. ### Themes [](#themes) - jQuery UI themes are used by default. - Bootstrap themes ([original](https://jsfiddle.net/Mottie/gfgkb4o1/) or [dark](https://jsfiddle.net/Mottie/emLfqchq/)) can also be applied. - Or add a completely custom theme (without using jQuery UI position utility): - [Light](https://jsfiddle.net/Mottie/jsh0377k/) using [keyboard-basic.css](https://github.com/Mottie/Keyboard/blob/master/css/keyboard-basic.css). - [Dark](https://jsfiddle.net/Mottie/6dmqhLvh/) using [keyboard-dark.css](https://github.com/Mottie/Keyboard/blob/master/css/keyboard-dark.css). ### Extensions [](#extensions) - [Alt-keys](https://mottie.github.io/Keyboard/docs/altkeys-popup.html): Show alternate keys in a popup after long-clicking on a key. - [Autocomplete](https://mottie.github.io/Keyboard/index.html#autocomplete): Integrate with jQuery UI's autocomplete widget. - [Caret](https://mottie.github.io/Keyboard/index.html#caret): Add a caret with custom styling. - [Extender](https://mottie.github.io/Keyboard/docs/extender.html): Add a togglable layout (e.g. toggle number pad) - [Keyset](https://mottie.github.io/Keyboard/docs/preview-keyset.html): Show shift, alt or meta keyset within the virtual keyboard - custom styling. - [Mobile](https://mottie.github.io/Keyboard/docs/mobile.html): Use with jQuery Mobile & jQuery [Mobile v1.4](https://mottie.github.io/Keyboard/docs/jquery-mobile-1.4.html). - [Navigate](https://mottie.github.io/Keyboard/docs/navigate.html): Use arrow, home, end & page up/down to navigate inside of the keyboard. - [Scramble](https://mottie.github.io/Keyboard/docs/scramble.html): Scramble the entire keyset or by row, once or every time the keyboard is opened for added security. - [Typing](https://mottie.github.io/Keyboard/index.html#typing): Allows you to simulate typing into the keyboard for demo purposes or to assist user input. Dependencies ------------ [](#dependencies) - Required - jQuery 1.4.3+ - jQuery caret (included with source) - Optional - jQuery UI Positioning Utility (optional, if you position the keyboard yourself) - jQuery UI CSS (can be customized) / Bootstrap CSS - jQuery mousewheel plugin - allows using mousewheel to scroll through other key sets - jQuery UI Autocomplete widget - use with jQuery keyboard autocomplete extension Installation ------------ [](#installation) - Download a [zip](https://github.com/Mottie/Keyboard/archive/master.zip) or [tar.gz](https://github.com/Mottie/Keyboard/archive/master.tar.gz) with all files, for use in the browser. - Use the files from [CDNJS](https://cdnjs.com/libraries/virtual-keyboard). - Install using [npm](https://www.npmjs.com/) via `npm install virtual-keyboard`. - Use with: - Angular [ng-virtual-keyboard](https://github.com/antonio-spinelli/ng-virtual-keyboard) by [antonio-spinelli](https://github.com/antonio-spinelli) via `npm install ng-virtual-keyboard`. - [ember-virtual-keyboard](https://github.com/SleepyWerewolf/ember-virtual-keyboard) by [SleepyWerewolf](https://github.com/SleepyWerewolf). - [react-virtual-keyboard](https://github.com/Utzel-Butzel/react-virtual-keyboard) by [Utzel-Butzel](https://github.com/Utzel-Butzel) via `npm install react-virtual-keyboard`. - [VueVirtualKeyboard](https://github.com/relzhong/vue-virtual-keyboard) by [relzhong](https://github.com/relzhong) via `npm install --save vue-virtual-keyboard`. - Ruby on Rails [virtual\_keyboard](https://github.com/scicasoft/virtual_keyboard) by [scicasoft](https://github.com/scicasoft) via `gem install virtual_keyboard`. - [VR Toolbox](https://steamcommunity.com/games/488040/announcements/detail/1431432753528769455). TypeScript ---------- [](#typescript) You can use it with TypeScript. Install [TypeScript](https://www.typescriptlang.org/) and [@types/virtual-keyboard](https://www.npmjs.com/package/@types/virtual-keyboard) into dev dependencies for that. Documentation ------------- [](#documentation) Wiki: [Home](https://github.com/Mottie/Keyboard/wiki/Home) | [FAQ](https://github.com/Mottie/Keyboard/wiki/FAQ) | [Setup](https://github.com/Mottie/Keyboard/wiki/Setup) | [Usage](https://github.com/Mottie/Keyboard/wiki/Usage) | [Options](https://github.com/Mottie/Keyboard/wiki/Options) ( [Layout](https://github.com/Mottie/Keyboard/wiki/Layout), [Language](https://github.com/Mottie/Keyboard/wiki/Language), [Usability](https://github.com/Mottie/Keyboard/wiki/Usability), [Actions](https://github.com/Mottie/Keyboard/wiki/Actions) ) | [Methods](https://github.com/Mottie/Keyboard/wiki/Methods) | [Theme](https://github.com/Mottie/Keyboard/wiki/Theme) | [Log](https://github.com/Mottie/Keyboard/wiki/Log) To Do ----- [](#to-do) - Add an input mask extension. I think I'll try to make it compatible with [this plugin](https://github.com/RobinHerbots/jquery.inputmask). - Allow attaching a keyboard to a contenteditable element. Added v1.27.0. Known Problems -------------- [](#known-problems) - *ALL*: Only inputs of type "text", "search", "url", "telephone" and "password" **support caret positioning** ([ref](https://html.spec.whatwg.org/#do-not-apply)). Using this keyboard with any other input type will break the caret left/right, backspace and delete keys (see [issue #241](https://github.com/Mottie/Keyboard/issues/241) for details). - *Mobile*: If the key press lags behind by one character, it is likely due to the mousewheel plugin. Disable it. See issues [\#379](https://github.com/Mottie/Keyboard/issues/379) & [\#411](https://github.com/Mottie/Keyboard/issues/411). - *IE* and *Opera*: - In a text area with multiple carriage returns, the caret positioning will be off when repositioning it with the mouse. - Using the right and left arrow keys to navigate through a text area with multiple carriage returns is problematic. The caret doesn't behave like in other browsers when moving from one line to the next. You can always reposition the caret using the mouse. - *Opera*: When pressing the tab key while inside a textarea, all browsers but Opera add the tab to the virtual keyboard textarea. - *Safari*: See the QWERTY Text Area demo with a locked input. While using the virtual keyboard to type, it enters the text in backwards! This is because textareas with a "readonly" attribute always returns zero for the caret position. - *Typing Extension*: - When pressing "Alt", the key set will change to the alt key set, but the focus will be moved to the browser menu. Pressing it quickly a second time will return the focus. This is built into the browser and it isn't possible (as far as I know) to automatically restore the window focus the first time alt is pressed. - Holding down the Alt key and trying to type is also not possible since the Windows OS is assuming you are trying to type a shortcut key to access the browser menu. You can still click the keys in the alt key set with the mouse. - Simulated typing on the keyboard breaks when the CapsLock is on. Still looking for a cross-browser solution. Contributing ------------ [](#contributing) - Install [node.js](http://nodejs.org/) - this includes `npm` (node package manager). - Run `npm install` in the root directory. - Run `npm install -g grunt-cli` to install the grunt command-line interface. - Make any changes to the code. - Unit tests will be added later. - Run `grunt` to perform a new build in the `/dist` folder. - Submit a pull request from a branch other than the `master`. Licensing --------- [](#licensing) - Keyboard code: [MIT License](http://www.opensource.org/licenses/mit-license.php) for all versions. - Caret code by C. F., Wong (Cloudgen): [MIT License](http://www.opensource.org/licenses/mit-license.php) - Layouts files: Most are under [WTFPL](http://sam.zoy.org/wtfpl/), unless the file itself specifies otherwise. [![FOSSA Status](https://camo.githubusercontent.com/0eb864efb90e5d72f0008dd58edc62844f1a2a3500600f523b4826428b0e85c3/68747470733a2f2f6170702e666f7373612e696f2f6170692f70726f6a656374732f6769742532426769746875622e636f6d2532464d6f747469652532464b6579626f6172642e7376673f747970653d6c61726765)](https://app.fossa.io/projects/git%2Bgithub.com%2FMottie%2FKeyboard?ref=badge_large) Change Log ---------- [](#change-log) Only the latest changes will be shown below, see the [wiki log](https://github.com/Mottie/Keyboard/wiki/Log) to view older versions. ### Version 1.30.4 (2022-01-24) [](#version-1304-2022-01-24) - Save & restore focus on init. Closes [issue #811](https://github.com/Mottie/Keyboard/issues/811) ### Version 1.30.3 (2021-03-14) [](#version-1303-2021-03-14) - Caret: Fix caret positioning in textarea ### Version 1.30.2 (2020-05-11) [](#version-1302-2020-05-11) - Core - Drop input type conversion from number to text. - Throw error on non-supported input types. Fixes [issue #754](https://github.com/Mottie/Keyboard/issues/754) - This is a breaking change since before the library would convert number & email types to a text type input. - Fix input type detection. See [issue #754](https://github.com/Mottie/Keyboard/issues/754). - Fix destroyed keyboard detection. - Update sign regex based on decimal setting. See [issue #771](https://github.com/Mottie/Keyboard/issues/771). - Layout - Updated multiple layouts: Oriya, Tamil, Telugu, Malayalam, Hindi, Kannada, Bengali, Gujarati, Marathi, Nepali, Punjabi & Urdu; all thanks to [durga598](https://github.com/durga598)! - Language - Fix French translation. Closes [issue #781](https://github.com/Mottie/Keyboard/issues/781) - Docs - Fix first layouts demo. ### Health Score 44 — FairBetter than 92% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity37 Limited adoption so far Community38 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 92.9% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~39 days Recently: every ~237 days Total 52 Last Release 1571d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/e7be29f17466d5bfadbf0c1c2703a4cba3b8cadf664fc273989e18b616fc0076?d=identicon)[Mottie](/maintainers/Mottie) --- Top Contributors [![Mottie](https://avatars.githubusercontent.com/u/136959?v=4)](https://github.com/Mottie "Mottie (839 commits)")[![durga598](https://avatars.githubusercontent.com/u/7346576?v=4)](https://github.com/durga598 "durga598 (10 commits)")[![jmsanzg](https://avatars.githubusercontent.com/u/768253?v=4)](https://github.com/jmsanzg "jmsanzg (6 commits)")[![bsurai](https://avatars.githubusercontent.com/u/17941824?v=4)](https://github.com/bsurai "bsurai (6 commits)")[![pacoalcantara](https://avatars.githubusercontent.com/u/127272?v=4)](https://github.com/pacoalcantara "pacoalcantara (4 commits)")[![aflorea](https://avatars.githubusercontent.com/u/5648968?v=4)](https://github.com/aflorea "aflorea (4 commits)")[![BrandonLWhite](https://avatars.githubusercontent.com/u/2344027?v=4)](https://github.com/BrandonLWhite "BrandonLWhite (4 commits)")[![0xflotus](https://avatars.githubusercontent.com/u/26602940?v=4)](https://github.com/0xflotus "0xflotus (2 commits)")[![akiraspeirs](https://avatars.githubusercontent.com/u/10894065?v=4)](https://github.com/akiraspeirs "akiraspeirs (2 commits)")[![david-hollifield](https://avatars.githubusercontent.com/u/686784?v=4)](https://github.com/david-hollifield "david-hollifield (2 commits)")[![ihsoft](https://avatars.githubusercontent.com/u/7295777?v=4)](https://github.com/ihsoft "ihsoft (2 commits)")[![insightfuls](https://avatars.githubusercontent.com/u/635085?v=4)](https://github.com/insightfuls "insightfuls (2 commits)")[![ptwz](https://avatars.githubusercontent.com/u/12641208?v=4)](https://github.com/ptwz "ptwz (2 commits)")[![gitter-badger](https://avatars.githubusercontent.com/u/8518239?v=4)](https://github.com/gitter-badger "gitter-badger (1 commits)")[![simon04](https://avatars.githubusercontent.com/u/782446?v=4)](https://github.com/simon04 "simon04 (1 commits)")[![sixtyfive](https://avatars.githubusercontent.com/u/192860?v=4)](https://github.com/sixtyfive "sixtyfive (1 commits)")[![BastienVerschaete](https://avatars.githubusercontent.com/u/32361274?v=4)](https://github.com/BastienVerschaete "BastienVerschaete (1 commits)")[![kant312](https://avatars.githubusercontent.com/u/1560133?v=4)](https://github.com/kant312 "kant312 (1 commits)")[![laminko](https://avatars.githubusercontent.com/u/543138?v=4)](https://github.com/laminko "laminko (1 commits)")[![ljskernel](https://avatars.githubusercontent.com/u/305511?v=4)](https://github.com/ljskernel "ljskernel (1 commits)") --- Tags jquerykeyboardoskvirtual-keyboarduicustomizableaccessibilityjquery-pluginkeyboardosk ### Embed Badge ![Health badge](/badges/mottie-keyboard/health.svg) ``` [![Health](https://phpackages.com/badges/mottie-keyboard/health.svg)](https://phpackages.com/packages/mottie-keyboard) ``` ### Alternatives [desandro/imagesloaded JavaScript is all like \_You images done yet or what?\_ 8.9k439.0k1](/packages/desandro-imagesloaded)[fullcalendar/fullcalendar Full-sized drag & drop event calendar 20.4k373.3k4](/packages/fullcalendar-fullcalendar)[froala/wysiwyg-editor A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users. 5.4k306.9k3](/packages/froala-wysiwyg-editor)[livewire/flux The official UI component library for Livewire. 9385.0M86](/packages/livewire-flux)[techlab/smartwizard The awesome jQuery step wizard plugin 79096.2k2](/packages/techlab-smartwizard)[mottie/tablesorter tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. 2.6k223.5k](/packages/mottie-tablesorter) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)