Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added gitattributes & gitignore

  • Loading branch information...
commit 0c6d78b386c3619a0d1cda4b06541c04a202365e 1 parent 94176f1
@Mottie authored
View
22 .gitattributes
@@ -0,0 +1,22 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+
+# Custom for Visual Studio
+*.cs diff=csharp
+*.sln merge=union
+*.csproj merge=union
+*.vbproj merge=union
+*.fsproj merge=union
+*.dbproj merge=union
+
+# Standard to msysgit
+*.doc diff=astextplain
+*.DOC diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot diff=astextplain
+*.DOT diff=astextplain
+*.pdf diff=astextplain
+*.PDF diff=astextplain
+*.rtf diff=astextplain
+*.RTF diff=astextplain
View
163 .gitignore
@@ -0,0 +1,163 @@
+#################
+## Eclipse
+#################
+
+*.pydevproject
+.project
+.metadata
+bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+local.properties
+.classpath
+.settings/
+.loadpath
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# CDT-specific
+.cproject
+
+# PDT-specific
+.buildpath
+
+
+#################
+## Visual Studio
+#################
+
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+
+# User-specific files
+*.suo
+*.user
+*.sln.docstates
+
+# Build results
+[Dd]ebug/
+[Rr]elease/
+*_i.c
+*_p.c
+*.ilk
+*.meta
+*.obj
+*.pch
+*.pdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.vspscc
+.builds
+*.dotCover
+
+## TODO: If you have NuGet Package Restore enabled, uncomment this
+#packages/
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opensdf
+*.sdf
+
+# Visual Studio profiler
+*.psess
+*.vsp
+
+# ReSharper is a .NET coding add-in
+_ReSharper*
+
+# Installshield output folder
+[Ee]xpress
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish
+
+# Others
+[Bb]in
+[Oo]bj
+sql
+TestResults
+*.Cache
+ClientBin
+stylecop.*
+~$*
+*.dbmdl
+Generated_Code #added for RIA/Silverlight projects
+
+# Backup & report files from converting an old project file to a newer
+# Visual Studio version. Backup files are not needed, because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+
+
+
+############
+## Windows
+############
+
+# Windows image file caches
+Thumbs.db
+
+# Folder config file
+Desktop.ini
+
+
+#############
+## Python
+#############
+
+*.py[co]
+
+# Packages
+*.egg
+*.egg-info
+dist
+build
+eggs
+parts
+bin
+var
+sdist
+develop-eggs
+.installed.cfg
+
+# Installer logs
+pip-log.txt
+
+# Unit test / coverage reports
+.coverage
+.tox
+
+#Translations
+*.mo
+
+#Mr Developer
+.mr.developer.cfg
+
+# Mac crap
+.DS_Store
View
339 README.markdown
@@ -1,165 +1,174 @@
-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).
-
-## Features ([Demo](http://mottie.github.com/Keyboard/))
-
-* 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 changed, 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 found in the keyboard.css file.
-* Built in watermarking. It emulates HTML5's 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.
-
-## Documentation
-
-Moved to the Wiki Pages: [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), [Useability](https://github.com/Mottie/Keyboard/wiki/Useability), [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
-
-* Waiting for requests :)
-* Add more regional keyboard layouts.
-* Add an input mask extension. I think I'll try to make it compatible with [this plugin](https://github.com/RobinHerbots/jquery.inputmask).
-
-## Known Problems
-
-* *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 postion.
-* *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 build 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 CapLock is on. Still looking for a cross-browser solution.
-
-## Dependencies
-* Required
- * jQuery 1.4.3+
- * jQuery UI Positioning Utility (optional, if you position the keyboard yourself)
- * jQuery UI CSS (can be customized)
- * jQuery caret (included with source)
-* Optional
- * jQuery mousewheel plugin - allows using mousewheel to scroll through other key sets
- * jQuery keyboard typing extension - simulate typing on the virtual keyboard
- * jQuery keyboard autocomplete extension - for use with jQuery UI autocomplete (also requires jQuery UI Positioning Utility)
-
-## 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.
-
-## Change Log
-
-Only the latest changes will be shown below, see the wiki log to view older versions.
-
-### Version 1.16 (12/13/2012)
-
-* Added `beforeVisible` event
- * This event occurs after the keyboard object (`keyboard.$keyboard`) has been built.
- * This event occurs immediately before the keyboard is positioned by the position utility.
- * Use this event to position the keyboard if you decide *not* to include the position utility.
- * Discussed adding this event in [issue #124](https://github.com/Mottie/Keyboard/issues/124).
-* All hover states are now cleared:
- * When the keyboard becomes visible. Fixes [issue #124](https://github.com/Mottie/Keyboard/issues/124).
- * For touch devices. Fixes [issue #114](https://github.com/Mottie/Keyboard/issues/114).
- * For the navigation extension.
-* Fixed autocomplete for jQuery UI v1.9+
- * The extension is still backwards compatible with older versions of jQuery UI.
- * Fixes [issue #115](https://github.com/Mottie/Keyboard/issues/115) and [issue #128](https://github.com/Mottie/Keyboard/issues/128).
-* Added `caretToEnd` option
- * When `true` the caret will always be moved to the end of the content when the keyboard is revealed.
- * If `false` the caret position will be restored to the last position it was in; at the beginning upon initial opening.
- * Enhancement request for [issue #129](https://github.com/Mottie/Keyboard/issues/129).
-* Added `lastKey` and `$lastKey` to the api (access the api using `kb = $('#keyboard').data('keyboard')`):
- * `kb.lastKey` contains the last typed character determined using the typed character code (not the actual text), when pressing keys on your actual keyboard, not the virtual one.
- * `kb.lastKey` contains the value from the clicked virtual keyboard button.
- * If any keys are mapped, the `kb.lastKey` will contain the mapped key character.
- * `kb.$lastKey` will be a jQuery object of the clicked keyboard button. If the actual keyboard was used to enter a character, this value will contain an empty array `[]` (length = 0).
- * Enhancement added for [issue #127](https://github.com/Mottie/Keyboard/issues/127).
-* Added syntax highlighting to the demo code.
-* Added Thai layout. Thanks to Herve Buyle via email!
-
-### Version 1.15 (10/16/2012)
-
-* Added iPad touch events.
- * Thanks to [mfayez](https://github.com/mfayez) for sharing the code!
- * Hopefully this fixes issues [#100](https://github.com/Mottie/Keyboard/issues/100) and [#117](https://github.com/Mottie/Keyboard/issues/117).
-* Added a `{default}` action key definition.
- * Clicking it makes the keyboard show the default keyset.
- * See gitaarik's updated [iPad demo](http://mottie.github.com/Keyboard/) code to see how it is used.
-* Fixed a problem which should prevent a combo replace error. See [issue #116](https://github.com/Mottie/Keyboard/issues/116#issuecomment-9479917).
-* Modified space bar css to not use a negative text indent. See [this article](http://nicolasgallagher.com/another-css-image-replacement-technique/).
-
-### Version 1.14.1 (10/8/2012)
-
-* Disabled jQuery UI Themeswitcher from the main and layouts demo pages, as the script is no longer available.
-* Updated demos to use jQuery 1.8 and jQuery UI 1.9.
-
-### Version 1.14 (10/2/2012)
-
-* Added iPad & iPad email demos by [gitaarik](https://github.com/gitaarik).
-
-### Version 1.13 (9/9/2012)
-
-* Fixed error caused by closing a keyboard in OSX using ctrl-esc or alt-esc. Fixes [issue #102](https://github.com/Mottie/Keyboard/issues/102).
-* Added Japanese and Spanish layouts thanks to [pacoalcantara](https://github.com/pacoalcantara)!
-* Added Polish layout thanks to Piotr (via email)!
-* Wide keys now use a `min-width` instead of `width`. This allows the key to properly expand to fit the text within it.
-* Updated autocomplete extension to save the caret position in IE9. Thanks to [banku](https://github.com/banku) for the fix in [issue #95](https://github.com/Mottie/Keyboard/issues/95).
-* Updated navigation extension:
- * Removed the `toggleKey` option.
- * Custom key codes can be assigned to any of the navigation keys within the new `$.keyboard.navigationKeys` object. Extend it as follows:
-
- ```javascript
- // change default navigation keys
- $.extend($.keyboard.navigationKeys, {
- toggle : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
- enter : 13, // Enter
- pageup : 33, // PageUp key
- pagedown : 34, // PageDown key
- end : 35, // End key
- home : 36, // Home key
- left : 37, // Left arrow key
- up : 38, // Up arrow key
- right : 39, // Right arrow key
- down : 40 // Down arrow key
- });
- ```
-
- Enhancement request from [issue #90](https://github.com/Mottie/Keyboard/issues/90). Thanks [faboudib](https://github.com/faboudib)!
-
- * Movement of the highlighted navigation key can now be triggered using `navigate` for predefined movement; see the [updated demo](http://mottie.github.com/Keyboard/navigate.html)
-
- ```javascript
- // navkey contains the name of the key: e.g. "home", "right", "pageup", etc
- var navkey = "pageup";
- $('#keyboard').trigger('navigate', navkey);
- ```
-
- Or, highlight a specific navigation key using the `navigateTo` trigger:
-
- ```javascript
- // navigate to the third row and fourth key (zero-based indexes) - [ row, index ]
- $('#keyboard').trigger('navigateTo', [2,3]);
- ```
+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).
+
+## Features ([Demo](http://mottie.github.com/Keyboard/))
+
+* 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 changed, 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 found in the keyboard.css file.
+* Built in watermarking. It emulates HTML5's 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.
+
+## Documentation
+
+Moved to the Wiki Pages: [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), [Useability](https://github.com/Mottie/Keyboard/wiki/Useability), [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
+
+* Waiting for requests :)
+* Add more regional keyboard layouts.
+* Add an input mask extension. I think I'll try to make it compatible with [this plugin](https://github.com/RobinHerbots/jquery.inputmask).
+
+## Known Problems
+
+* *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 postion.
+* *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 build 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 CapLock is on. Still looking for a cross-browser solution.
+
+## Dependencies
+* Required
+ * jQuery 1.4.3+
+ * jQuery UI Positioning Utility (optional, if you position the keyboard yourself)
+ * jQuery UI CSS (can be customized)
+ * jQuery caret (included with source)
+* Optional
+ * jQuery mousewheel plugin - allows using mousewheel to scroll through other key sets
+ * jQuery keyboard typing extension - simulate typing on the virtual keyboard
+ * jQuery keyboard autocomplete extension - for use with jQuery UI autocomplete (also requires jQuery UI Positioning Utility)
+
+## 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.
+
+## Change Log
+
+Only the latest changes will be shown below, see the wiki log to view older versions.
+
+### Version 1.17 (2/12/2013)
+
+* Added portuguese layout and modified the layout demo to build the layout selector instead of adding an option element each time.
+* Added an `{empty}` special key which inserts a blank unclickable key into the keyboard. Using `{sp:1}` will does not add a key, but a blank space between keys.
+* Added a method to restore the caret position in IE in attempts to fix [issue #131](https://github.com/Mottie/keyboard/issues/131).
+* Added a `return false` to prevent a click through on elements behind the keyboard when the `autoAccept` option is `true`.
+* Modified the `switchInput` function to now target non-keyboard enabled elements - try [this demo](http://jsfiddle.net/Mottie/MK947/715/).
+* Removed Opera textarea hack as it has been fixed in the latest versions. [This demo](http://jsfiddle.net/vwb3c/) should work properly now (keep hitting carriage returns).
+
+### Version 1.16 (12/13/2012)
+
+* Added `beforeVisible` event
+ * This event occurs after the keyboard object (`keyboard.$keyboard`) has been built.
+ * This event occurs immediately before the keyboard is positioned by the position utility.
+ * Use this event to position the keyboard if you decide *not* to include the position utility.
+ * Discussed adding this event in [issue #124](https://github.com/Mottie/Keyboard/issues/124).
+* All hover states are now cleared:
+ * When the keyboard becomes visible. Fixes [issue #124](https://github.com/Mottie/Keyboard/issues/124).
+ * For touch devices. Fixes [issue #114](https://github.com/Mottie/Keyboard/issues/114).
+ * For the navigation extension.
+* Fixed autocomplete for jQuery UI v1.9+
+ * The extension is still backwards compatible with older versions of jQuery UI.
+ * Fixes [issue #115](https://github.com/Mottie/Keyboard/issues/115) and [issue #128](https://github.com/Mottie/Keyboard/issues/128).
+* Added `caretToEnd` option
+ * When `true` the caret will always be moved to the end of the content when the keyboard is revealed.
+ * If `false` the caret position will be restored to the last position it was in; at the beginning upon initial opening.
+ * Enhancement request for [issue #129](https://github.com/Mottie/Keyboard/issues/129).
+* Added `lastKey` and `$lastKey` to the api (access the api using `kb = $('#keyboard').data('keyboard')`):
+ * `kb.lastKey` contains the last typed character determined using the typed character code (not the actual text), when pressing keys on your actual keyboard, not the virtual one.
+ * `kb.lastKey` contains the value from the clicked virtual keyboard button.
+ * If any keys are mapped, the `kb.lastKey` will contain the mapped key character.
+ * `kb.$lastKey` will be a jQuery object of the clicked keyboard button. If the actual keyboard was used to enter a character, this value will contain an empty array `[]` (length = 0).
+ * Enhancement added for [issue #127](https://github.com/Mottie/Keyboard/issues/127).
+* Added syntax highlighting to the demo code.
+* Added Thai layout. Thanks to Herve Buyle via email!
+
+### Version 1.15 (10/16/2012)
+
+* Added iPad touch events.
+ * Thanks to [mfayez](https://github.com/mfayez) for sharing the code!
+ * Hopefully this fixes issues [#100](https://github.com/Mottie/Keyboard/issues/100) and [#117](https://github.com/Mottie/Keyboard/issues/117).
+* Added a `{default}` action key definition.
+ * Clicking it makes the keyboard show the default keyset.
+ * See gitaarik's updated [iPad demo](http://mottie.github.com/Keyboard/) code to see how it is used.
+* Fixed a problem which should prevent a combo replace error. See [issue #116](https://github.com/Mottie/Keyboard/issues/116#issuecomment-9479917).
+* Modified space bar css to not use a negative text indent. See [this article](http://nicolasgallagher.com/another-css-image-replacement-technique/).
+
+### Version 1.14.1 (10/8/2012)
+
+* Disabled jQuery UI Themeswitcher from the main and layouts demo pages, as the script is no longer available.
+* Updated demos to use jQuery 1.8 and jQuery UI 1.9.
+
+### Version 1.14 (10/2/2012)
+
+* Added iPad & iPad email demos by [gitaarik](https://github.com/gitaarik).
+
+### Version 1.13 (9/9/2012)
+
+* Fixed error caused by closing a keyboard in OSX using ctrl-esc or alt-esc. Fixes [issue #102](https://github.com/Mottie/Keyboard/issues/102).
+* Added Japanese and Spanish layouts thanks to [pacoalcantara](https://github.com/pacoalcantara)!
+* Added Polish layout thanks to Piotr (via email)!
+* Wide keys now use a `min-width` instead of `width`. This allows the key to properly expand to fit the text within it.
+* Updated autocomplete extension to save the caret position in IE9. Thanks to [banku](https://github.com/banku) for the fix in [issue #95](https://github.com/Mottie/Keyboard/issues/95).
+* Updated navigation extension:
+ * Removed the `toggleKey` option.
+ * Custom key codes can be assigned to any of the navigation keys within the new `$.keyboard.navigationKeys` object. Extend it as follows:
+
+ ```javascript
+ // change default navigation keys
+ $.extend($.keyboard.navigationKeys, {
+ toggle : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
+ enter : 13, // Enter
+ pageup : 33, // PageUp key
+ pagedown : 34, // PageDown key
+ end : 35, // End key
+ home : 36, // Home key
+ left : 37, // Left arrow key
+ up : 38, // Up arrow key
+ right : 39, // Right arrow key
+ down : 40 // Down arrow key
+ });
+ ```
+
+ Enhancement request from [issue #90](https://github.com/Mottie/Keyboard/issues/90). Thanks [faboudib](https://github.com/faboudib)!
+
+ * Movement of the highlighted navigation key can now be triggered using `navigate` for predefined movement; see the [updated demo](http://mottie.github.com/Keyboard/navigate.html)
+
+ ```javascript
+ // navkey contains the name of the key: e.g. "home", "right", "pageup", etc
+ var navkey = "pageup";
+ $('#keyboard').trigger('navigate', navkey);
+ ```
+
+ Or, highlight a specific navigation key using the `navigateTo` trigger:
+
+ ```javascript
+ // navigate to the third row and fourth key (zero-based indexes) - [ row, index ]
+ $('#keyboard').trigger('navigateTo', [2,3]);
+ ```
View
2  css/keyboard.css
@@ -2,7 +2,7 @@
.ui-keyboard { padding: .3em; position: absolute; left: 0; top: 0; z-index: 16000; }
.ui-keyboard-has-focus { z-index: 16001; }
.ui-keyboard div { font-size: 1.1em; }
-.ui-keyboard-button { height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; }
+.ui-keyboard-button { height: 2em; width: 2em; min-width: 1em; margin: .1em; cursor: pointer; overflow: hidden; line-height: 2em; -moz-user-focus: ignore; }
.ui-keyboard-button span { padding: 0; margin: 0; white-space:nowrap; display: inline-block; }
.ui-keyboard-button-endrow { clear: left; }
.ui-keyboard-widekey { min-width: 4em; width: auto; }
View
812 demo/demo.js
@@ -1,406 +1,406 @@
-jQuery(function($) {
-
- // QWERTY Text Input
- // The bottom of this file is where the autocomplete extension is added
- // ********************
- $('.qwerty:first').keyboard({ layout: 'qwerty' });
-
- // QWERTY Password
- // ********************
- $('.qwerty:eq(1)').keyboard({
- openOn : null,
- stayOpen : true,
- layout : 'qwerty'
- });
- $('#passwd').click(function(){
- $('.qwerty:eq(1)').getkeyboard().reveal();
- });
- // since IE adds an overlay behind the input to prevent clicking in other inputs (the keyboard may not automatically open on focus... silly IE bug)
- // We can remove the overlay (transparent) if desired using this code:
- $('.qwerty:eq(1)').bind('visible.keyboard', function(e, keyboard, el){
- $('.ui-keyboard-overlay').remove(); // remove overlay because clicking on it will close the keyboard... we set "openOn" to null to prevent closing.
- });
-
- // QWERTY Text Area
- // ********************
- $('.qwerty:last').keyboard({
- layout : 'qwerty',
- lockInput: true // prevent manual keyboard entry
- });
-
- // International Text Area
- // ********************
- $('#inter').keyboard({ layout: 'international' });
-
- // Alphabetical Text Area
- // ********************
- $('#alpha').keyboard({ layout: 'alpha' });
-
- // Dvorak Text Area
- // ********************
- $('#dvorak').keyboard({ layout: 'dvorak' });
-
- // Num Pad Input
- // ********************
- $('#num').keyboard({
- layout: 'num',
- restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
- preventPaste : true, // prevent ctrl-v and right click
- autoAccept : true
- });
-
- // Custom: Hex
- // ********************
- $('#hex').keyboard({
- layout: 'custom',
- customLayout: {
- 'default' : [
- 'C D E F',
- '8 9 A B',
- '4 5 6 7',
- '0 1 2 3',
- '{bksp} {a} {c}'
- ]
- },
- maxLength : 6,
- restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
- useCombos : false // don't want A+E to become a ligature
- });
-
- // Custom: Meta Sets
- // ********************
- $('#meta').keyboard({
- layout : 'custom',
- display: {
- 'alt' : 'AltGr:It\'s all Greek to me',
- 'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
- 'meta2' : '\u2665:Russian', // Heart
- 'meta3' : '\u2663:zodiac', // Club
- 'meta99' : '\u2660:numbers' // Spade
- },
- customLayout: {
- 'default' : [
- // Add labels using a ":" after the key's name and replace spaces with "_"
- // without the labels this line is just 'a b c d e f g'
- 'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'shift' : [
- 'A B C D E F G',
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'alt' : [
- '\u03b1:alpha \u03b2:beta \u03B3:gamma \u03b4:delta \u03b5:epsilon \u03b6:zeta \u03b7:eta', // lower case Greek
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'alt-shift' : [
- '\u0391:alpha \u0392:beta \u0393:gamma \u0394:delta \u0395:epsilon \u03A6:zeta \u03A7:eta', // upper case Greek
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1' : [
- 't u v w x y z', // lower case end of alphabet
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-shift' : [
- 'T U V W X Y Z', // upper case
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-alt' : [
- '0 9 8 7 6 5 4', // numbers
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-alt-shift' : [
- ') ( * & ^ % $', // shifted numbers
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta2' : [
- '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta2-shift' : [
- '\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta3' : [
- '\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta99' : [
- '1 2 3 4 5 6 7', // only because I ran out of ideas
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ]
- }
- });
-
-/* example from readme, comment out the meta example above then uncomment this one to test it
- $('#meta').keyboard({
- layout: 'custom',
- display: {
- 'meta1' : '\u2666', // Diamond
- 'meta2' : '\u2665' // Heart
- },
- customLayout: {
- 'default' : [
- 'd e f a u l t',
- '{meta1} {meta2} {accept} {cancel}'
- ],
- 'meta1' : [
- 'm y m e t a 1',
- '{meta1} {meta2} {accept} {cancel}'
- ],
- 'meta2' : [
- 'M Y M E T A 2',
- '{meta1} {meta2} {accept} {cancel}'
- ]
- }
- })
-*/
-
- // Custom: Junk / Examples
- // ********************
- $('#junk').keyboard({
- layout: 'custom',
- customLayout: {
- 'default' : [
- 'a e i o u y c',
- '` \' " ~ ^ {dec} {combo}',
- '{tab} {enter} {bksp}',
- '{space}',
- '{accept} {cancel} {shift}'
- ],
- 'shift' : [
- 'A E I O U Y C',
- '` \' " ~ ^ {dec} {combo}',
- '{t} {sp:1} {e} {sp:1} {b}',
- '{space}',
- '{a} {sp:1} {c} {sp:1} {s}'
- ]
- },
- // Added here as an example on how to add combos
- combos : {
- 'a' : { e: '\u00e6' },
- 'A' : { E: '\u00c6' }
- },
- // example callback function
- accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
- });
-
- // Custom: Mapped keys
- // ********************
- $('#map').keyboard({
- layout : 'custom',
- customLayout: {
- 'default' : [
- // "n(a):title/tooltip"; n = new key, (a) = actual key, ":label" = title/tooltip (use an underscore "_" in place of a space " ")
- '\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03be(c):lower_case_xi_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b3(g):lower_case_gamma_(type_g)', // lower case Greek
- '{shift} {accept} {cancel}'
- ],
- 'shift' : [
- '\u0391(A):alpha \u0392(B):beta \u039e(C):xi \u0394(D):delta \u0395(E):epsilon \u03a6(F):phi \u0393(G):gamma', // upper case Greek
- '{shift} {accept} {cancel}'
- ]
- },
- usePreview: false // no preveiw
- });
-
- // Custom: Hidden Input
- // click on a link - add focus to hidden input
- // ********************
- $('.hiddenInput').click(function(){
- $('#hidden').trigger('focus.keyboard');
- return false;
- });
- // Initialize keyboard script on hidden input
- // set "position.of" to the same link as above
- $('#hidden').keyboard({
- layout: 'qwerty',
- position : {
- of : $('.hiddenInput'),
- my : 'center top',
- at : 'center top'
- }
- });
-
- // Custom: iPad by gitaarik
- // ********************
- $('#ipad').keyboard({
-
- display: {
- 'bksp' : '\u2190',
- 'accept' : 'return',
- 'default' : 'ABC',
- 'shift' : '\u21d1',
- 'meta1' : '.?123',
- 'meta2' : '#+='
- },
-
- layout: 'custom',
-
- customLayout: {
-
- 'default': [
- 'q w e r t y u i o p {bksp}',
- 'a s d f g h j k l {enter}',
- '{s} z x c v b n m , . {s}',
- '{meta1} {space} {meta1} {accept}'
- ],
- 'shift': [
- 'Q W E R T Y U I O P {bksp}',
- 'A S D F G H J K L {enter}',
- '{s} Z X C V B N M ! ? {s}',
- '{meta1} {space} {meta1} {accept}'
- ],
- 'meta1': [
- '1 2 3 4 5 6 7 8 9 0 {bksp}',
- '- / : ; ( ) \u20ac & @ {enter}',
- '{meta2} . , ? ! \' " {meta2}',
- '{default} {space} {default} {accept}'
- ],
- 'meta2': [
- '[ ] { } # % ^ * + = {bksp}',
- '_ \\ | ~ < > $ \u00a3 \u00a5 {enter}',
- '{meta1} . , ? ! \' " {meta1}',
- '{default} {space} {default} {accept}'
- ]
-
- }
-
- });
-
- // Custom: iPad email by gitaarik
- // ********************
- $('#ipad-email').keyboard({
-
- display: {
- 'bksp' : '\u2190',
- 'enter' : 'return',
- 'default' : 'ABC',
- 'meta1' : '.?123',
- 'meta2' : '#+=',
- 'accept' : '\u21d3'
- },
-
- layout: 'custom',
-
- customLayout: {
-
- 'default': [
- 'q w e r t y u i o p {bksp}',
- 'a s d f g h j k l {enter}',
- '{s} z x c v b n m @ . {s}',
- '{meta1} {space} _ - {accept}'
- ],
- 'shift': [
- 'Q W E R T Y U I O P {bksp}',
- 'A S D F G H J K L {enter}',
- '{s} Z X C V B N M @ . {s}',
- '{meta1} {space} _ - {accept}'
- ],
- 'meta1': [
- '1 2 3 4 5 6 7 8 9 0 {bksp}',
- '` | { } % ^ * / \' {enter}',
- '{meta2} $ & ~ # = + . {meta2}',
- '{default} {space} ! ? {accept}'
- ],
- 'meta2': [
- '[ ] { } \u2039 \u203a ^ * " , {bksp}',
- '\\ | / < > $ \u00a3 \u00a5 \u2022 {enter}',
- '{meta1} \u20ac & ~ # = + . {meta1}',
- '{default} {space} ! ? {accept}'
- ]
-
- }
-
- });
-
- // Console showing callback messages
- // ********************
- $('.ui-keyboard-input').bind('visible.keyboard hidden.keyboard beforeClose.keyboard accepted.keyboard canceled.keyboard', function(e, keyboard, el, status){
- var c = $('#console'),
- t = '<li>' + $(el).parent().find('h2').text();
- switch (e.type){
- case 'visible' : t += ' keyboard is visible'; break;
- case 'hidden' : t += ' keyboard is now hidden'; break;
- case 'accepted' : t += ' content "' + el.value + '" was accepted' + ($(el).is('[type=password]') ? ', yeah... not so secure :(' : ''); break;
- case 'canceled' : t += ' content was ignored'; break;
- case 'beforeClose' : t += ' keyboard is about to close, contents were ' + (status ? 'accepted' : 'ignored'); break;
- }
- t += '</li>';
- c.append(t);
- if (c.find('li').length > 3) { c.find('li').eq(0).remove(); }
- });
-
- // Show code
- // ********************
- $('h2 span').click(function(){
- var t = '<h2>' + $(this).parent().text() + ' Code</h2>' + $(this).closest('.block').find('.code').html();
- $('#showcode').html(t).show();
- $("#showcode .js").chili();
- $("#showcode .html").chili();
- });
-
- // add tooltips
- // ********************
- $.jatt();
-
-// ********************
-// Extension demos
-// ********************
-
- // Set up typing simulator extension on ALL keyboards
- $('.ui-keyboard-input').addTyping();
-
- // simulate typing into the keyboard (\t = tab, \b = backspace, \r or \n = enter)
- $('#inter-type').click(function(){
- $('#inter').getkeyboard().reveal().typeIn("\tHell'o\bo \r\tWorld", 500);
- return false;
- });
- $('#meta-type').click(function(){
- var meta = $('#meta').getkeyboard();
- meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });
- return false;
- });
-
- // Autocomplete demo
- var availableTags = [
- "ActionScript",
- "AppleScript",
- "Asp",
- "BASIC",
- "C",
- "C++",
- "Clojure",
- "COBOL",
- "ColdFusion",
- "Erlang",
- "Fortran",
- "Groovy",
- "Haskell",
- "Java",
- "JavaScript",
- "Lisp",
- "Perl",
- "PHP",
- "Python",
- "Ruby",
- "Scala",
- "Scheme"
- ];
- $('.qwerty:eq(0)')
- .autocomplete({
- source: availableTags
- })
- .addAutocomplete();
-});
+jQuery(function($) {
+
+ // QWERTY Text Input
+ // The bottom of this file is where the autocomplete extension is added
+ // ********************
+ $('.qwerty:first').keyboard({ layout: 'qwerty' });
+
+ // QWERTY Password
+ // ********************
+ $('.qwerty:eq(1)').keyboard({
+ openOn : null,
+ stayOpen : true,
+ layout : 'qwerty'
+ });
+ $('#passwd').click(function(){
+ $('.qwerty:eq(1)').getkeyboard().reveal();
+ });
+ // since IE adds an overlay behind the input to prevent clicking in other inputs (the keyboard may not automatically open on focus... silly IE bug)
+ // We can remove the overlay (transparent) if desired using this code:
+ $('.qwerty:eq(1)').bind('visible.keyboard', function(e, keyboard, el){
+ $('.ui-keyboard-overlay').remove(); // remove overlay because clicking on it will close the keyboard... we set "openOn" to null to prevent closing.
+ });
+
+ // QWERTY Text Area
+ // ********************
+ $('.qwerty:last').keyboard({
+ layout : 'qwerty',
+ lockInput: true // prevent manual keyboard entry
+ });
+
+ // International Text Area
+ // ********************
+ $('#inter').keyboard({ layout: 'international' });
+
+ // Alphabetical Text Area
+ // ********************
+ $('#alpha').keyboard({ layout: 'alpha' });
+
+ // Dvorak Text Area
+ // ********************
+ $('#dvorak').keyboard({ layout: 'dvorak' });
+
+ // Num Pad Input
+ // ********************
+ $('#num').keyboard({
+ layout: 'num',
+ restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
+ preventPaste : true, // prevent ctrl-v and right click
+ autoAccept : true
+ });
+
+ // Custom: Hex
+ // ********************
+ $('#hex').keyboard({
+ layout: 'custom',
+ customLayout: {
+ 'default' : [
+ 'C D E F',
+ '8 9 A B',
+ '4 5 6 7',
+ '0 1 2 3',
+ '{bksp} {a} {c}'
+ ]
+ },
+ maxLength : 6,
+ restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
+ useCombos : false // don't want A+E to become a ligature
+ });
+
+ // Custom: Meta Sets
+ // ********************
+ $('#meta').keyboard({
+ layout : 'custom',
+ display: {
+ 'alt' : 'AltGr:It\'s all Greek to me',
+ 'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
+ 'meta2' : '\u2665:Russian', // Heart
+ 'meta3' : '\u2663:zodiac', // Club
+ 'meta99' : '\u2660:numbers' // Spade
+ },
+ customLayout: {
+ 'default' : [
+ // Add labels using a ":" after the key's name and replace spaces with "_"
+ // without the labels this line is just 'a b c d e f g'
+ 'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'shift' : [
+ 'A B C D E F G',
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'alt' : [
+ '\u03b1:alpha \u03b2:beta \u03B3:gamma \u03b4:delta \u03b5:epsilon \u03b6:zeta \u03b7:eta', // lower case Greek
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'alt-shift' : [
+ '\u0391:alpha \u0392:beta \u0393:gamma \u0394:delta \u0395:epsilon \u03A6:zeta \u03A7:eta', // upper case Greek
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1' : [
+ 't u v w x y z', // lower case end of alphabet
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-shift' : [
+ 'T U V W X Y Z', // upper case
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt' : [
+ '0 9 8 7 6 5 4', // numbers
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt-shift' : [
+ ') ( * & ^ % $', // shifted numbers
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2' : [
+ '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2-shift' : [
+ '\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta3' : [
+ '\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta99' : [
+ '1 2 3 4 5 6 7', // only because I ran out of ideas
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ]
+ }
+ });
+
+/* example from readme, comment out the meta example above then uncomment this one to test it
+ $('#meta').keyboard({
+ layout: 'custom',
+ display: {
+ 'meta1' : '\u2666', // Diamond
+ 'meta2' : '\u2665' // Heart
+ },
+ customLayout: {
+ 'default' : [
+ 'd e f a u l t',
+ '{meta1} {meta2} {accept} {cancel}'
+ ],
+ 'meta1' : [
+ 'm y m e t a 1',
+ '{meta1} {meta2} {accept} {cancel}'
+ ],
+ 'meta2' : [
+ 'M Y M E T A 2',
+ '{meta1} {meta2} {accept} {cancel}'
+ ]
+ }
+ })
+*/
+
+ // Custom: Junk / Examples
+ // ********************
+ $('#junk').keyboard({
+ layout: 'custom',
+ customLayout: {
+ 'default' : [
+ 'a e i o u y c',
+ '` \' " ~ ^ {dec} {combo}',
+ '{tab} {enter} {bksp}',
+ '{space}',
+ '{accept} {cancel} {shift}'
+ ],
+ 'shift' : [
+ 'A E I O U Y C',
+ '` \' " ~ ^ {dec} {combo}',
+ '{t} {sp:1} {e} {sp:1} {b}',
+ '{space}',
+ '{a} {sp:1} {c} {sp:1} {s}'
+ ]
+ },
+ // Added here as an example on how to add combos
+ combos : {
+ 'a' : { e: '\u00e6' },
+ 'A' : { E: '\u00c6' }
+ },
+ // example callback function
+ accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
+ });
+
+ // Custom: Mapped keys
+ // ********************
+ $('#map').keyboard({
+ layout : 'custom',
+ customLayout: {
+ 'default' : [
+ // "n(a):title/tooltip"; n = new key, (a) = actual key, ":label" = title/tooltip (use an underscore "_" in place of a space " ")
+ '\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03be(c):lower_case_xi_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b3(g):lower_case_gamma_(type_g)', // lower case Greek
+ '{shift} {accept} {cancel}'
+ ],
+ 'shift' : [
+ '\u0391(A):alpha \u0392(B):beta \u039e(C):xi \u0394(D):delta \u0395(E):epsilon \u03a6(F):phi \u0393(G):gamma', // upper case Greek
+ '{shift} {accept} {cancel}'
+ ]
+ },
+ usePreview: false // no preveiw
+ });
+
+ // Custom: Hidden Input
+ // click on a link - add focus to hidden input
+ // ********************
+ $('.hiddenInput').click(function(){
+ $('#hidden').trigger('focus.keyboard');
+ return false;
+ });
+ // Initialize keyboard script on hidden input
+ // set "position.of" to the same link as above
+ $('#hidden').keyboard({
+ layout: 'qwerty',
+ position : {
+ of : $('.hiddenInput'),
+ my : 'center top',
+ at : 'center top'
+ }
+ });
+
+ // Custom: iPad by gitaarik
+ // ********************
+ $('#ipad').keyboard({
+
+ display: {
+ 'bksp' : '\u2190',
+ 'accept' : 'return',
+ 'default' : 'ABC',
+ 'shift' : '\u21d1',
+ 'meta1' : '.?123',
+ 'meta2' : '#+='
+ },
+
+ layout: 'custom',
+
+ customLayout: {
+
+ 'default': [
+ 'q w e r t y u i o p {bksp}',
+ 'a s d f g h j k l {enter}',
+ '{s} z x c v b n m , . {s}',
+ '{meta1} {space} {meta1} {accept}'
+ ],
+ 'shift': [
+ 'Q W E R T Y U I O P {bksp}',
+ 'A S D F G H J K L {enter}',
+ '{s} Z X C V B N M ! ? {s}',
+ '{meta1} {space} {meta1} {accept}'
+ ],
+ 'meta1': [
+ '1 2 3 4 5 6 7 8 9 0 {bksp}',
+ '- / : ; ( ) \u20ac & @ {enter}',
+ '{meta2} . , ? ! \' " {meta2}',
+ '{default} {space} {default} {accept}'
+ ],
+ 'meta2': [
+ '[ ] { } # % ^ * + = {bksp}',
+ '_ \\ | ~ < > $ \u00a3 \u00a5 {enter}',
+ '{meta1} . , ? ! \' " {meta1}',
+ '{default} {space} {default} {accept}'
+ ]
+
+ }
+
+ });
+
+ // Custom: iPad email by gitaarik
+ // ********************
+ $('#ipad-email').keyboard({
+
+ display: {
+ 'bksp' : '\u2190',
+ 'enter' : 'return',
+ 'default' : 'ABC',
+ 'meta1' : '.?123',
+ 'meta2' : '#+=',
+ 'accept' : '\u21d3'
+ },
+
+ layout: 'custom',
+
+ customLayout: {
+
+ 'default': [
+ 'q w e r t y u i o p {bksp}',
+ 'a s d f g h j k l {enter}',
+ '{s} z x c v b n m @ . {s}',
+ '{meta1} {space} _ - {accept}'
+ ],
+ 'shift': [
+ 'Q W E R T Y U I O P {bksp}',
+ 'A S D F G H J K L {enter}',
+ '{s} Z X C V B N M @ . {s}',
+ '{meta1} {space} _ - {accept}'
+ ],
+ 'meta1': [
+ '1 2 3 4 5 6 7 8 9 0 {bksp}',
+ '` | { } % ^ * / \' {enter}',
+ '{meta2} $ & ~ # = + . {meta2}',
+ '{default} {space} ! ? {accept}'
+ ],
+ 'meta2': [
+ '[ ] { } \u2039 \u203a ^ * " , {bksp}',
+ '\\ | / < > $ \u00a3 \u00a5 \u2022 {enter}',
+ '{meta1} \u20ac & ~ # = + . {meta1}',
+ '{default} {space} ! ? {accept}'
+ ]
+
+ }
+
+ });
+
+ // Console showing callback messages
+ // ********************
+ $('.ui-keyboard-input').bind('visible.keyboard hidden.keyboard beforeClose.keyboard accepted.keyboard canceled.keyboard', function(e, keyboard, el, status){
+ var c = $('#console'),
+ t = '<li>' + $(el).parent().find('h2').text();
+ switch (e.type){
+ case 'visible' : t += ' keyboard is visible'; break;
+ case 'hidden' : t += ' keyboard is now hidden'; break;
+ case 'accepted' : t += ' content "' + el.value + '" was accepted' + ($(el).is('[type=password]') ? ', yeah... not so secure :(' : ''); break;
+ case 'canceled' : t += ' content was ignored'; break;
+ case 'beforeClose' : t += ' keyboard is about to close, contents were ' + (status ? 'accepted' : 'ignored'); break;
+ }
+ t += '</li>';
+ c.append(t);
+ if (c.find('li').length > 3) { c.find('li').eq(0).remove(); }
+ });
+
+ // Show code
+ // ********************
+ $('h2 span').click(function(){
+ var t = '<h2>' + $(this).parent().text() + ' Code</h2>' + $(this).closest('.block').find('.code').html();
+ $('#showcode').html(t).show();
+ $("#showcode .js").chili();
+ $("#showcode .html").chili();
+ });
+
+ // add tooltips
+ // ********************
+ $.jatt();
+
+// ********************
+// Extension demos
+// ********************
+
+ // Set up typing simulator extension on ALL keyboards
+ $('.ui-keyboard-input').addTyping();
+
+ // simulate typing into the keyboard (\t = tab, \b = backspace, \r or \n = enter)
+ $('#inter-type').click(function(){
+ $('#inter').getkeyboard().reveal().typeIn("\tHell'o\bo \r\tWorld", 500);
+ return false;
+ });
+ $('#meta-type').click(function(){
+ var meta = $('#meta').getkeyboard();
+ meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });
+ return false;
+ });
+
+ // Autocomplete demo
+ var availableTags = [
+ "ActionScript",
+ "AppleScript",
+ "Asp",
+ "BASIC",
+ "C",
+ "C++",
+ "Clojure",
+ "COBOL",
+ "ColdFusion",
+ "Erlang",
+ "Fortran",
+ "Groovy",
+ "Haskell",
+ "Java",
+ "JavaScript",
+ "Lisp",
+ "Perl",
+ "PHP",
+ "Python",
+ "Ruby",
+ "Scala",
+ "Scheme"
+ ];
+ $('.qwerty:eq(0)')
+ .autocomplete({
+ source: availableTags
+ })
+ .addAutocomplete();
+});
View
1,136 index.html
@@ -1,569 +1,569 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
-
- <title>Virtual Keyboard</title>
-
- <!-- jQuery & jQuery UI + theme (required) -->
- <link href="http://code.jquery.com/ui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
- <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
-
- <!-- keyboard widget css & script (required) -->
- <link href="css/keyboard.css" rel="stylesheet">
- <script src="js/jquery.keyboard.js"></script>
-
- <!-- keyboard extensions (optional) -->
- <script src="js/jquery.mousewheel.js"></script>
- <script src="js/jquery.keyboard.extension-typing.js"></script>
- <script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-
- <!-- demo only -->
- <link href="demo/demo.css" rel="stylesheet">
- <script src="demo/demo.js"></script>
- <script src="http://mottie.github.com/Jatt/js/jquery.jatt.min.js"></script> <!-- tooltips -->
- <script src="demo/jquery.chili-2.2.js"></script> <!-- syntax highlighting -->
- <script src="demo/recipes.js"></script>
-
-</head>
-
-<body>
-
-<div id="page-wrap">
-
- <!-- Links to other demo pages & docs -->
- <div id="nav">
- <a class="current" href="index.html">Main Demo</a>
- <a href="basic.html">Basic</a>
- <a href="mobile.html">Mobile</a>
- <a href="layouts.html">Layouts</a>
- <a href="navigate.html">Navigate</a>
- <a href="calculator.html">Calculator</a>
- <a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
- <a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
- <a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
- <a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br>
- </div>
- <!-- End Links -->
-
- <h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a></h1>
- <h4>Original by
- <a href="http://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>,
- updated &amp; maintained by <a href="http://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
- </h4>
-
- <ul id="console">
- <li>...</li>
- <li>...</li>
- <li>...</li>
- <li>...</li>
- </ul>
-<h3>Click on the keyboard title, then scroll down to see its code</h3>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">QWERTY Text</span></h2>
- <input class="qwerty" type="text" placeholder="Enter something...">
- <br>
- <small>
- * Placeholder (watermark).<br>
- * Autocomplete.
- </small>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;input class="qwerty" type="text" placeholder="Enter something..."&gt;</pre>
-<pre class="js">
-// Script
-// Autocomplete demo
-var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
- "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
- "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
-
-$('.qwerty:eq(0)')
- .keyboard({ layout: 'qwerty' })
- .autocomplete({
- source: availableTags
- })
- .addAutocomplete()
- .addTyping();</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">QWERTY Password</span> <img id="passwd" class="tooltip" title="Click to open the virtual keyboard" src="demo/keyboard.png"></h2>
- <input class="qwerty" type="password">
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;input class="qwerty" type="password"&gt;</pre>
-<pre class="js">
-// Script
-$('.qwerty:eq(1)')
- .keyboard({
- openOn : null,
- stayOpen : true,
- layout : 'qwerty'
- })
- .addTyping();
-$('#passwd').click(function(){
- $('.qwerty:eq(1)').getkeyboard().reveal();
-});</pre>
- </div>
- <br>
- <small>
- * Click icon to open keyboard.<br>
- * Stay open until accept/cancel.<br>
- * Key hover disabled in this type.
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">QWERTY Text Area</span></h2>
- <textarea class="qwerty"></textarea>
- <br>
- <small>
- * Locked input (no manual input).<br>
- * Position the hidden caret!<br>
- * Known readonly bug in Safari.
- </small>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea class="qwerty"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('.qwerty:eq(2)')
- .keyboard({
- layout : 'qwerty',
- lockInput: true // prevent manual keyboard entry
- })
- .addTyping();</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">International</span> <img id="inter-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
- <textarea id="inter"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="inter"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#inter')
- .keyboard({ layout: 'international' })
- .addTyping();
-
-// Script - typing extension
-$('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Alphabetical</span></h2>
- <textarea id="alpha"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="alpha"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#alpha')
- .keyboard({ layout: 'alpha' })
- .addTyping();</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Dvorak</span></h2>
- <textarea id="dvorak"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#dvorak')
- .keyboard({ layout: 'dvorak' })
- .addTyping();</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Num Pad</span></h2>
- <input id="num" class="alignRight" type="text">
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;input id="num" class="alignRight" type="text"&gt;</pre>
-<pre class="js">
-// Script
-$('#num')
- .keyboard({
- layout : 'num',
- restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
- preventPaste : true, // prevent ctrl-v and right click
- autoAccept : true
- })
- .addTyping();</pre>
- </div>
- <br>
- <small>
- * Input restricted.<br>
- * Pasting (ctrl-v) not allowed.<br>
- * Auto accept content.
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: Hex</span></h2>
- <input id="hex" type="text">
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;input id="hex" type="text"&gt;</pre>
-<pre class="js">
-// Script
-$('#hex')
- .keyboard({
- layout: 'custom',
- customLayout: {
- 'default' : [
- 'C D E F',
- '8 9 A B',
- '4 5 6 7',
- '0 1 2 3',
- '{bksp} {a} {c}'
- ]
- },
- maxLength : 6,
- restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
- useCombos : false // don't want A+E to become a ligature
- })
- .addTyping();</pre>
- </div>
- <br>
- <small>
- * maxLength = 6.<br>
- * Input restricted.
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: Meta Sets</span> <img id="meta-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
- <textarea id="meta"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="meta"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#meta')
- .keyboard({
- layout: 'custom',
- display: {
- 'alt' : 'AltGr:It\'s all Greek to me',
- 'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
- 'meta2' : '\u2665:Russian', // Heart
- 'meta3' : '\u2663:zodiac', // Club
- 'meta99' : '\u2660:numbers' // Spade
- },
- customLayout: {
- 'default' : [
- // Add labels using a ":" after the key's name and replace spaces with "_"
- // without the labels this line is just 'a b c d e f g'
- 'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'shift' : [
- 'A B C D E F G',
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'alt' : [
- '\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', // lower case Greek
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'alt-shift' : [
- '\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', // upper case Greek
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1' : [
- 't u v w x y z', // lower case end of alphabet
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-shift' : [
- 'T U V W X Y Z', // upper case
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-alt' : [
- '0 9 8 7 6 5 4', // numbers
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta1-alt-shift' : [
- ') ( * & ^ % $', // shifted numbers
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta2' : [
- '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta2-shift' : [
- '\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta3' : [
- '\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ],
- 'meta99' : [
- '1 2 3 4 5 6 7', // only because I ran out of ideas
- '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
- '{bksp} {sp:1} {accept} {cancel}'
- ]
- }
- })
- .addTyping();
-
-//Script - typing extension
-var meta = $('#meta').getkeyboard();
-meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: Junk</span></h2>
- <textarea id="junk"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="junk"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#junk')
- .keyboard({
- layout: 'custom',
- customLayout: {
- 'default' : [
- 'a e i o u y c',
- '` \' " ~ {sp:1} {dec}',
- '{tab} {enter} {bksp}',
- '{space}',
- '{accept} {cancel} {shift}'
- ],
- 'shift' : [
- 'A E I O U Y C',
- '` \' " ~ {sp:1} {dec}',
- '{t} {sp:1} {e} {sp:1} {b}',
- '{space}',
- '{a} {sp:1} {c} {sp:1} {s}'
- ]
- },
- // Added here as an example on how to add combos
- combos : {
- 'a' : { e: '\u00e6' },
- 'A' : { E: '\u00c6' }
- },
- // example callback function
- accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
- })
- .addTyping();</pre>
- </div>
- <br>
- <small>
- * Use shift key - see action key sizes.<br>
- * Use the decimal - only one allowed.<br>
- * Type in 'ae' and other combo keys.<br>
- * Accept content to see the callback.
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: Mapped Keys</span></h2>
- <textarea id="map"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="map"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-// *** Mapped keys ***
-$('#map').keyboard({
- layout: 'custom',
- customLayout: {
- 'default' : [
- // "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")
- '\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03b3(c):lower_case_gamma_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b7(g):lower_case_eta_(type_g)', // lower case Greek
- '{shift} {accept} {cancel}'
- ],
- 'shift' : [
- '\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', // upper case Greek
- '{shift} {accept} {cancel}'
- ]
- },
- usePreview: false // no preveiw
-});</pre>
- </div>
- <br>
- <small>
- * No preview window.<br>
- * Type in a-g.<br>
- * Type in A-G (shifted).<br>
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: Hidden</span></h2>
- <a href="#" class="hiddenInput">Hidden input</a>
- <!-- DON'T use type="hidden" because IE doesn't like hidden inputs -->
- <input id="hidden" type="text" style="display:none;">
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
-&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;
-&lt;input id="hidden" type="text" style="display:none;"&gt;</pre>
-<pre class="js">
-// Script
-// *** Hidden input example ***
-// click on a link - add focus to hidden input
-$('.hiddenInput').click(function(){
- $('#hidden').trigger('focus.keyboard');
- return false;
-});
-// Initialize keyboard script on hidden input
-// set "position.of" to the same link as above
-$('#hidden')
- .keyboard({
- layout : 'qwerty',
- position : {
- of : $('.hiddenInput'),
- my : 'center top',
- at : 'center top'
- }
- })
- .addTyping();</pre>
- </div>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: iPad</span></h2>
- <textarea id="ipad"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="ipad"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#ipad').keyboard({
-
- display: {
- 'bksp' : "\u2190",
- 'accept' : 'return',
- 'default': 'ABC',
- 'meta1' : '.?123',
- 'meta2' : '#+='
- },
-
- layout: 'custom',
-
- customLayout: {
-
- 'default': [
- 'q w e r t y u i o p {bksp}',
- 'a s d f g h j k l {enter}',
- '{s} z x c v b n m , . {s}',
- '{meta1} {space} {meta1} {accept}'
- ],
- 'shift': [
- 'Q W E R T Y U I O P {bksp}',
- 'A S D F G H J K L {enter}',
- '{s} Z X C V B N M ! ? {s}',
- '{meta1} {space} {meta1} {accept}'
- ],
- 'meta1': [
- '1 2 3 4 5 6 7 8 9 0 {bksp}',
- '- / : ; ( ) \u20ac & @ {enter}',
- '{meta2} . , ? ! \' " {meta2}',
- '{default} {space} {default} {accept}'
- ],
- 'meta2': [
- '[ ] { } # % ^ * + = {bksp}',
- '_ \\ | ~ < > $ \u00a3 \u00a5 {enter}',
- '{meta1} . , ? ! \' " {meta1}',
- '{default} {space} {default} {accept}'
- ]
-
- }
-
-});</pre>
- </div>
- <br>
- <small>
- * Thanks to <a href="https://github.com/gitaarik">gitaarik</a> for sharing!.
- </small>
- </div>
-
- <div class="block">
- <h2><span class="tooltip" title="Click to see code">Custom: iPad email input</span></h2>
- <textarea id="ipad-email"></textarea>
- <div class="code ui-corner-all">
- <pre class="html">&lt;!-- HTML --&gt;
-&lt;textarea id="ipad-email"&gt;&lt;/textarea&gt;</pre>
-<pre class="js">
-// Script
-$('#ipad-email').keyboard({
-
- display: {
- 'bksp' : '\u2190',
- 'enter' : 'return',
- 'default': 'ABC',
- 'meta1' : '.?123',
- 'meta2' : '#+=',
- 'accept' : '\u21d3'
- },
-
- layout: 'custom',
-
- customLayout: {
-
- 'default': [
- 'q w e r t y u i o p {bksp}',
- 'a s d f g h j k l {enter}',
- '{s} z x c v b n m @ . {s}',
- '{meta1} {space} _ - {accept}'
- ],
- 'shift': [
- 'Q W E R T Y U I O P {bksp}',
- 'A S D F G H J K L {enter}',
- '{s} Z X C V B N M @ . {s}',
- '{meta1} {space} _ - {accept}'
- ],
- 'meta1': [
- '1 2 3 4 5 6 7 8 9 0 {bksp}',
- '` | { } % ^ * / \' {enter}',
- '{meta2} $ & ~ # = + . {meta2}',
- '{default} {space} ! ? {accept}'
- ],
- 'meta2': [
- '[ ] { } \u2039 \u203a ^ * " , {bksp}',
- '\\ | / < > $ \u00a3 \u00a5 \u2022 {enter}',
- '{meta1} \u20ac & ~ # = + . {meta1}',
- '{default} {space} ! ? {accept}'
- ]
-
- }
-
-});</pre>
- </div>
- <br>
- <small>
- * Thanks to <a href="https://github.com/gitaarik">gitaarik</a> for sharing!.
- </small>
- </div>
-
- <div id="showcode"></div>
-
- <div id="footer"></div>
-
-</div>
-
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+
+ <title>Virtual Keyboard</title>
+
+ <!-- jQuery & jQuery UI + theme (required) -->
+ <link href="http://code.jquery.com/ui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
+ <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
+
+ <!-- keyboard widget css & script (required) -->
+ <link href="css/keyboard.css" rel="stylesheet">
+ <script src="js/jquery.keyboard.js"></script>
+
+ <!-- keyboard extensions (optional) -->
+ <script src="js/jquery.mousewheel.js"></script>
+ <script src="js/jquery.keyboard.extension-typing.js"></script>
+ <script src="js/jquery.keyboard.extension-autocomplete.js"></script>
+
+ <!-- demo only -->
+ <link href="demo/demo.css" rel="stylesheet">
+ <script src="demo/demo.js"></script>
+ <script src="http://mottie.github.com/Jatt/js/jquery.jatt.min.js"></script> <!-- tooltips -->
+ <script src="demo/jquery.chili-2.2.js"></script> <!-- syntax highlighting -->
+ <script src="demo/recipes.js"></script>
+
+</head>
+
+<body>
+
+<div id="page-wrap">
+
+ <!-- Links to other demo pages & docs -->
+ <div id="nav">
+ <a class="current" href="index.html">Main Demo</a>
+ <a href="basic.html">Basic</a>
+ <a href="mobile.html">Mobile</a>
+ <a href="layouts.html">Layouts</a>
+ <a href="navigate.html">Navigate</a>
+ <a href="calculator.html">Calculator</a>
+ <a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
+ <a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
+ <a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
+ <a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br>
+ </div>
+ <!-- End Links -->
+
+ <h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard</a></h1>
+ <h4>Original by
+ <a href="http://jsatt.blogspot.com/2010/01/on-screen-keyboard-widget-using-jquery.html">Jeremy Satterfield</a>,
+ updated &amp; maintained by <a href="http://wowmotty.blogspot.com/2010/11/jquery-ui-keyboard-widget.html">Rob Garrison</a>
+ </h4>
+
+ <ul id="console">
+ <li>...</li>
+ <li>...</li>
+ <li>...</li>
+ <li>...</li>
+ </ul>
+<h3>Click on the keyboard title, then scroll down to see its code</h3>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">QWERTY Text</span></h2>
+ <input class="qwerty" type="text" placeholder="Enter something...">
+ <br>
+ <small>
+ * Placeholder (watermark).<br>
+ * Autocomplete.
+ </small>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;input class="qwerty" type="text" placeholder="Enter something..."&gt;</pre>
+<pre class="js">
+// Script
+// Autocomplete demo
+var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
+ "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
+ "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
+
+$('.qwerty:eq(0)')
+ .keyboard({ layout: 'qwerty' })
+ .autocomplete({
+ source: availableTags
+ })
+ .addAutocomplete()
+ .addTyping();</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">QWERTY Password</span> <img id="passwd" class="tooltip" title="Click to open the virtual keyboard" src="demo/keyboard.png"></h2>
+ <input class="qwerty" type="password">
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;input class="qwerty" type="password"&gt;</pre>
+<pre class="js">
+// Script
+$('.qwerty:eq(1)')
+ .keyboard({
+ openOn : null,
+ stayOpen : true,
+ layout : 'qwerty'
+ })
+ .addTyping();
+$('#passwd').click(function(){
+ $('.qwerty:eq(1)').getkeyboard().reveal();
+});</pre>
+ </div>
+ <br>
+ <small>
+ * Click icon to open keyboard.<br>
+ * Stay open until accept/cancel.<br>
+ * Key hover disabled in this type.
+ </small>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">QWERTY Text Area</span></h2>
+ <textarea class="qwerty"></textarea>
+ <br>
+ <small>
+ * Locked input (no manual input).<br>
+ * Position the hidden caret!<br>
+ * Known readonly bug in Safari.
+ </small>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea class="qwerty"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('.qwerty:eq(2)')
+ .keyboard({
+ layout : 'qwerty',
+ lockInput: true // prevent manual keyboard entry
+ })
+ .addTyping();</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">International</span> <img id="inter-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
+ <textarea id="inter"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="inter"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('#inter')
+ .keyboard({ layout: 'international' })
+ .addTyping();
+
+// Script - typing extension
+$('#inter').getkeyboard().reveal().typeIn('\tHello \b\n\tWorld', 500);</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Alphabetical</span></h2>
+ <textarea id="alpha"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="alpha"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('#alpha')
+ .keyboard({ layout: 'alpha' })
+ .addTyping();</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Dvorak</span></h2>
+ <textarea id="dvorak"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="dvorak"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('#dvorak')
+ .keyboard({ layout: 'dvorak' })
+ .addTyping();</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Num Pad</span></h2>
+ <input id="num" class="alignRight" type="text">
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;input id="num" class="alignRight" type="text"&gt;</pre>
+<pre class="js">
+// Script
+$('#num')
+ .keyboard({
+ layout : 'num',
+ restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
+ preventPaste : true, // prevent ctrl-v and right click
+ autoAccept : true
+ })
+ .addTyping();</pre>
+ </div>
+ <br>
+ <small>
+ * Input restricted.<br>
+ * Pasting (ctrl-v) not allowed.<br>
+ * Auto accept content.
+ </small>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: Hex</span></h2>
+ <input id="hex" type="text">
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;input id="hex" type="text"&gt;</pre>
+<pre class="js">
+// Script
+$('#hex')
+ .keyboard({
+ layout: 'custom',
+ customLayout: {
+ 'default' : [
+ 'C D E F',
+ '8 9 A B',
+ '4 5 6 7',
+ '0 1 2 3',
+ '{bksp} {a} {c}'
+ ]
+ },
+ maxLength : 6,
+ restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
+ useCombos : false // don't want A+E to become a ligature
+ })
+ .addTyping();</pre>
+ </div>
+ <br>
+ <small>
+ * maxLength = 6.<br>
+ * Input restricted.
+ </small>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: Meta Sets</span> <img id="meta-type" class="tooltip" title="Try out the typing extension!" src="demo/keyboard.png"></h2>
+ <textarea id="meta"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="meta"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('#meta')
+ .keyboard({
+ layout: 'custom',
+ display: {
+ 'alt' : 'AltGr:It\'s all Greek to me',
+ 'meta1' : '\u2666:end of alphabet', // Diamond with label that shows in the title (spaces are okay here)
+ 'meta2' : '\u2665:Russian', // Heart
+ 'meta3' : '\u2663:zodiac', // Club
+ 'meta99' : '\u2660:numbers' // Spade
+ },
+ customLayout: {
+ 'default' : [
+ // Add labels using a ":" after the key's name and replace spaces with "_"
+ // without the labels this line is just 'a b c d e f g'
+ 'a:a_letter,_that_sounds_like_"ey" b:a_bug_that_makes_honey c:is_when_I_look_around d:a_grade,_I_never_got e:is_what_girls_say_when_they_run_away_from_me f:u,_is_what_I_say_to_those_screaming_girls! g:gee,_is_that_the_end_of_my_wittiness?',
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'shift' : [
+ 'A B C D E F G',
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'alt' : [
+ '\u03b1 \u03b2 \u03b3 \u03b4 \u03b5 \u03b6 \u03b7', // lower case Greek
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'alt-shift' : [
+ '\u0391 \u0392 \u0393 \u0394 \u0395 \u0396 \u0397', // upper case Greek
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1' : [
+ 't u v w x y z', // lower case end of alphabet
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-shift' : [
+ 'T U V W X Y Z', // upper case
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt' : [
+ '0 9 8 7 6 5 4', // numbers
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta1-alt-shift' : [
+ ') ( * & ^ % $', // shifted numbers
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2' : [
+ '\u0430 \u0431 \u0432 \u0433 \u0434 \u0435 \u0436', // lower case Russian
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta2-shift' : [
+ '\u0410 \u0411 \u0412 \u0413 \u0414 \u0415 \u0416', // upper case Russian
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta3' : [
+ '\u2648 \u2649 \u264A \u264B \u264C \u264D \u264E', // Zodiac
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ],
+ 'meta99' : [
+ '1 2 3 4 5 6 7', // only because I ran out of ideas
+ '{shift} {alt} {meta1} {meta2} {meta3} {meta99}',
+ '{bksp} {sp:1} {accept} {cancel}'
+ ]
+ }
+ })
+ .addTyping();
+
+//Script - typing extension
+var meta = $('#meta').getkeyboard();
+meta.reveal().typeIn('aBcD1112389\u2648\u2649', 700, function(){ meta.accept(); alert('all done!'); });</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: Junk</span></h2>
+ <textarea id="junk"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="junk"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+$('#junk')
+ .keyboard({
+ layout: 'custom',
+ customLayout: {
+ 'default' : [
+ 'a e i o u y c',
+ '` \' " ~ {sp:1} {dec}',
+ '{tab} {enter} {bksp}',
+ '{space}',
+ '{accept} {cancel} {shift}'
+ ],
+ 'shift' : [
+ 'A E I O U Y C',
+ '` \' " ~ {sp:1} {dec}',
+ '{t} {sp:1} {e} {sp:1} {b}',
+ '{space}',
+ '{a} {sp:1} {c} {sp:1} {s}'
+ ]
+ },
+ // Added here as an example on how to add combos
+ combos : {
+ 'a' : { e: '\u00e6' },
+ 'A' : { E: '\u00c6' }
+ },
+ // example callback function
+ accepted : function(e, keyboard, el){ alert('The content "' + el.value + '" was accepted!'); }
+ })
+ .addTyping();</pre>
+ </div>
+ <br>
+ <small>
+ * Use shift key - see action key sizes.<br>
+ * Use the decimal - only one allowed.<br>
+ * Type in 'ae' and other combo keys.<br>
+ * Accept content to see the callback.
+ </small>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: Mapped Keys</span></h2>
+ <textarea id="map"></textarea>
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;textarea id="map"&gt;&lt;/textarea&gt;</pre>
+<pre class="js">
+// Script
+// *** Mapped keys ***
+$('#map').keyboard({
+ layout: 'custom',
+ customLayout: {
+ 'default' : [
+ // "n(a):title_or_tooltip"; n = new key, (a) = actual key, ":label" = title_or_tooltip (use an underscore "_" in place of a space " ")
+ '\u03b1(a):lower_case_alpha_(type_a) \u03b2(b):lower_case_beta_(type_b) \u03b3(c):lower_case_gamma_(type_c) \u03b4(d):lower_case_delta_(type_d) \u03b5(e):lower_case_epsilon_(type_e) \u03b6(f):lower_case_zeta_(type_f) \u03b7(g):lower_case_eta_(type_g)', // lower case Greek
+ '{shift} {accept} {cancel}'
+ ],
+ 'shift' : [
+ '\u0391(A) \u0392(B) \u0393(C) \u0394(D) \u0395(E) \u0396(F) \u0397(G)', // upper case Greek
+ '{shift} {accept} {cancel}'
+ ]
+ },
+ usePreview: false // no preveiw
+});</pre>
+ </div>
+ <br>
+ <small>
+ * No preview window.<br>
+ * Type in a-g.<br>
+ * Type in A-G (shifted).<br>
+ </small>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: Hidden</span></h2>
+ <a href="#" class="hiddenInput">Hidden input</a>
+ <!-- DON'T use type="hidden" because IE doesn't like hidden inputs -->
+ <input id="hidden" type="text" style="display:none;">
+ <div class="code ui-corner-all">
+ <pre class="html">&lt;!-- HTML --&gt;
+&lt;a href="#" class="hiddenInput"&gt;Hidden input&lt;/a&gt;
+&lt;!-- DON'T use type="hidden" because IE doesn't like hidden inputs --&gt;
+&lt;input id="hidden" type="text" style="display:none;"&gt;</pre>
+<pre class="js">
+// Script
+// *** Hidden input example ***
+// click on a link - add focus to hidden input
+$('.hiddenInput').click(function(){
+ $('#hidden').trigger('focus.keyboard');
+ return false;
+});
+// Initialize keyboard script on hidden input
+// set "position.of" to the same link as above
+$('#hidden')
+ .keyboard({
+ layout : 'qwerty',
+ position : {
+ of : $('.hiddenInput'),
+ my : 'center top',
+ at : 'center top'
+ }
+ })
+ .addTyping();</pre>
+ </div>
+ </div>
+
+ <div class="block">
+ <h2><span class="tooltip" title="Click to see code">Custom: iPad</span></h2>