<script src="/js_webseite/jquery.js"></script> <style> body { margin-top: 100px; } #wrap { display: block; margin: 0 auto; width: 200px; } /* keyboard - jQuery UI Widget */ .ui-keyboard { text-align: center; padding: .3em; position: absolute; left: 0; top: 0; z-index: 16000; /* see issue #484 */ -ms-touch-action: manipulation; touch-action: manipulation; } .ui-keyboard-has-focus { z-index: 16001; } .ui-keyboard div { font-size: 1.1em; } .ui-keyboard[contenteditable] { white-space: pre; } .ui-keyboard-button { height: 2em; min-width: 2em; 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-space { width: 15em; } /* see http://nicolasgallagher.com/another-css-image-replacement-technique/ */ .ui-keyboard-space span, .ui-keyboard-empty span { font: 0/0 a; text-shadow: none; color: transparent; } .ui-keyboard-preview-wrapper { text-align: center; position: relative; overflow: hidden; } /* width is calculated in IE, since 99% = 99% full browser width =( */ .ui-keyboard-preview { text-align: left; margin: 0 0 3px 0; display: inline; width: 99%; } .ui-keyboard-keyset { text-align: center; white-space: nowrap; } .ui-keyboard-input { text-align: left; } .ui-keyboard-input-current { -moz-box-shadow: 0 0 5px #4d90fe; -webkit-box-shadow: 0 0 5px #4d90fe; box-shadow: 0 0 5px #4d90fe; } .ui-keyboard-placeholder { color: #888; } /* disabled or readonly inputs, or use input[disabled='disabled'] { color: #f00; } */ .ui-keyboard-nokeyboard { color: #888; border-color: #888; } .ui-keyboard-spacer { display: inline-block; width: 1px; height: 0; cursor: default; } .ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span, .ui-keyboard-ZWJ span, .ui-keyboard-LRM span, .ui-keyboard-RLM span { font-size: 0.5em; line-height: 1.5em; white-space: normal; } /* combo key styling - toggles diacritics on/off */ .ui-keyboard-button.ui-keyboard-combo.ui-state-default { border-color: #ffaf0f; } /* (in)valid inputs */ button.ui-keyboard-accept.ui-keyboard-valid-input { border-color: #0c0; background: #080; color: #fff; } button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover { background: #0a0; } button.ui-keyboard-accept.ui-keyboard-invalid-input { border-color: #c00; background: #800; color: #fff; opacity: 0.5; filter: alpha(opacity=50); } button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover { background: #a00; } /*** Caret extension definition ***/ /* margin-top => is added to the caret height (top & bottom) */ .ui-keyboard-caret { background: #c00; width: 1px; margin-top: 3px; } /*** jQuery Mobile definitions ***/ /* jQuery Mobile styles - need wider buttons because of font size and text-overflow:ellipsis */ div.ui-body.ui-keyboard button.ui-keyboard-button.ui-btn { padding: 0.5em 1em; border-color: transparent; } .ui-body .ui-keyboard-button { width: 3em; height: 3em; display: inline-block; } .ui-body .ui-keyboard-widekey { width: 5.5em; } .ui-body .ui-keyboard-space { width: 15em; } .ui-body .ui-keyboard-space span { visibility: hidden; /* hides the ellipsis */ } .ui-body .ui-keyboard-keyset { line-height: 0.5em; } .ui-body input.ui-input-text, .ui-body textarea.ui-input-text { width: 95%; } /* over-ride padding set by mobile ui theme - needed because the mobile script wraps button text with several more spans */ .ui-body .ui-btn-inner { height: 2em; padding: 0.2em 0; margin: 0; } .ui-body .ui-btn { margin: 0; font-size: 13px; /* mobile default size is 13px */ } /* override Bootstrap excessive button padding */ button.ui-keyboard-button.btn { padding: 1px 6px; } /* enable/disable icons */ button.ui-keyboard-toggle span { width: .8em; height: .8em; display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: contain; } /* unlocked icon (keyboard enabled) */ button.ui-keyboard-toggle span { /* light theme unlocked icon - fill: #111 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==); } .ui-keyboard-dark-theme button.ui-keyboard-toggle span { /* dark theme unlocked icon - fill: #eee */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==); } /* locked icon (keyboard disabled) */ button.ui-keyboard-toggle.ui-keyboard-disabled span { /* light theme locked icon - fill: #111 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=); } .ui-keyboard-dark-theme button.ui-keyboard-toggle.ui-keyboard-disabled span { /* dark theme locked icon - fill: #eee */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=); } .ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle), .ui-keyboard.ui-keyboard-disabled input { opacity: 0.5; } /*** Alt-Keys Popup extension ***/ /* clickable overlay on top of keyboard to hide the popup */ .ui-keyboard-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); } /* the actual popup styling, class names from the css.container option are also added */ .ui-keyboard-popup { display: inline-block; /* default buttons are 2em wide + .1em margin on either side (set in .ui-keyboard-button definition); so use multiples of 2.2em for a max-width if you don't want any extra white space on the sides, e.g. 5 buttons * 2.2em = 11em, 6 buttons * 2.2em = 13.2em, etc */ max-width: 22em; /* 10 buttons */ } .ui-keyboard.ui-keyboard-popup-open .ui-keyboard-keyset .ui-keyboard-button { /* Disable keys under overlay while popup is open - see #654 */ pointer-events: none; } /*** Extender keyboard extension ***/ div.ui-keyboard-extender { margin-left: 5px; } button.ui-keyboard-extender span { width: .9em; height: .9em; display: inline-block; margin-bottom: 3px; background-repeat: no-repeat; background-position: center center; background-size: contain; /* light theme extender icon - fill: #111 */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); } .ui-keyboard-dark-theme button.ui-keyboard-extender span { /* dark theme extender icon - fill: #eee */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+); } /* Media Queries (optimized for jQuery UI themes; may be slightly off in jQuery Mobile themes) */ /* 240 x 320 (small phone) */ @media all and (max-width: 319px) { .ui-keyboard div { font-size: 9px; } .ui-keyboard .ui-keyboard-input { font-size: 12px; } /* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */ .ui-body .ui-btn { margin: 0; font-size: 9px; } .ui-body .ui-keyboard-button { width: 1.8em; height: 2.5em; } .ui-body .ui-keyboard-widekey { width: 4em; } .ui-body .ui-keyboard-space { width: 8em; } .ui-body .ui-btn-inner { height: 2.5em; padding: 0.3em 0; } } /* 320 x 480 (iPhone) */ @media all and (min-width: 320px) and (max-width: 479px) { .ui-keyboard div { font-size: 9px; } .ui-keyboard .ui-keyboard-input { font-size: 14px; } /* I don't own an iPhone so I have no idea how small this really is... is it even clickable with your finger? */ .ui-body .ui-btn { margin: 0; font-size: 11px; } .ui-body .ui-keyboard-button { width: 1.8em; height: 3em; } .ui-body .ui-keyboard-widekey { width: 4.5em; } .ui-body .ui-keyboard-space { width: 10em; } .ui-body .ui-btn-inner { height: 3em; padding: 0.7em 0; } } /* 480 x 640 (small tablet) */ @media all and (min-width: 480px) and (max-width: 767px) { .ui-keyboard div { font-size: 13px; } .ui-keyboard .ui-keyboard-input { font-size: 14px; } .ui-body .ui-btn { margin: 0; font-size: 10px; } .ui-body .ui-keyboard-button { height: 2.5em; } .ui-body .ui-btn-inner { height: 2.5em; padding: 0.5em 0; } } </style> <script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script> <!-- <script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> --> <script src="/js_webseite/jquery.keyboard.extension-typing.js"></script> <link href="/css_webseite/jquery-ui.css" rel="stylesheet"> <div id="wrap"> <input id="keyboard" type="text" /> <img id="icon" src="/image/keyboard.png" /> </div> <script> $(function() { var simulateTyping = "Hello World!!1\b <3"; $.keyboard.language.love = $.extend($.keyboard.language.en); $('#keyboard').keyboard({ language: ['de'], rtl: false, layout: 'qwerty', customLayout: { }, position: { of: null, my: 'center top', at: 'center top', at2: 'center bottom' }, reposition: true, usePreview: true, alwaysOpen: false, initialFocus: true, noFocus: false, stayOpen: false, userClosed: false, ignoreEsc: false, display: { 'meta1': '\u2666', // Diamond 'meta2': '\u2665', // Heart // check mark (accept) 'a': '\u2714:Accept (Shift-Enter)', 'accept': 'Accept:Accept (Shift-Enter)', 'alt': 'AltGr:Alternate Graphemes', // Left arrow (same as ←) 'b': '\u2190:Backspace', 'bksp': 'Bksp:Backspace', // big X, close/cancel 'c': '\u2716:Cancel (Esc)', 'cancel': 'Cancel:Cancel (Esc)', // clear num pad 'clear': 'C:Clear', 'combo': '\u00f6:Toggle Combo Keys', // num pad decimal '.' (US) & ',' (EU) 'dec': '.:Decimal', // down, then left arrow - enter symbol 'e': '\u21b5:Enter', 'empty': '\u00a0', //   'enter': 'Enter:Enter', // left arrow (move caret) 'left': '\u2190', // caps lock 'lock': '\u21ea Lock:Caps Lock', 'next': 'Next \u21e8', 'prev': '\u21e6 Prev', // right arrow (move caret) 'right': '\u2192', // thick hollow up arrow 's': '\u21e7:Shift', 'shift': 'Shift:Shift', // +/- sign for num pad 'sign': '\u00b1:Change Sign', 'space': '\u00a0:Space', // right arrow to bar // \u21b9 is the true tab symbol 't': '\u21e5:Tab', 'tab': '\u21e5 Tab:Tab', // replaced by an image 'toggle': ' ', // added to titles of keys // accept key status when acceptValid:true 'valid': 'valid', 'invalid': 'invalid', // combo key states 'active': 'active', 'disabled': 'disabled' }, // Message added to the key title while hovering, // if the mousewheel plugin exists wheelMessage: 'Use mousewheel to see other keys', css: { // input & preview input: 'ui-widget-content ui-corner-all', // keyboard container container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix', // keyboard container extra class (same as container, but separate) popup: '', // default state buttonDefault: 'ui-state-default ui-corner-all', // hovered button buttonHover: 'ui-state-hover', // Action keys (e.g. Accept, Cancel, Tab, etc); // this replaces "actionClass" option buttonAction: 'ui-state-active', // Active keys // (e.g. shift down, meta keyset active, combo keys active) buttonActive: 'ui-state-active', // used when disabling the decimal button {dec} // when a decimal exists in the input area buttonDisabled: 'ui-state-disabled', // {empty} button class name buttonEmpty: 'ui-keyboard-empty' }, // *** Useability *** // Auto-accept content when clicking outside the // keyboard (popup will close) autoAccept: false, // Auto-accept content even if the user presses escape // (only works if `autoAccept` is `true`) autoAcceptOnEsc: false, // Prevents direct input in the preview window when true lockInput: false, // Prevent keys not in the displayed keyboard from being // typed in restrictInput: false, // Additional allowed characters while restrictInput is true restrictInclude: '', // e.g. 'a b foo \ud83d\ude38' // Check input against validate function, if valid the // accept button is clickable; if invalid, the accept // button is disabled. acceptValid: true, // Auto-accept when input is valid; requires `acceptValid` // set `true` & validate callback autoAcceptOnValid: false, // if acceptValid is true & the validate function returns // a false, this option will cancel a keyboard close only // after the accept button is pressed cancelClose: true, // tab to go to next, shift-tab for previous // (default behavior) tabNavigation: false, // enter for next input; shift-enter accepts content & // goes to next shift + "enterMod" + enter ("enterMod" // is the alt as set below) will accept content and go // to previous in a textarea enterNavigation: false, // mod key options: 'ctrlKey', 'shiftKey', 'altKey', // 'metaKey' (MAC only) // alt-enter to go to previous; // shift-alt-enter to accept & go to previous enterMod: 'altKey', // if true, the next button will stop on the last // keyboard input/textarea; prev button stops at first // if false, the next button will wrap to target the // first input/textarea; prev will go to the last stopAtEnd: true, // Set this to append the keyboard immediately after the // input/textarea it is attached to. This option works // best when the input container doesn't have a set width // and when the "tabNavigation" option is true appendLocally: false, // When appendLocally is false, the keyboard will be appended // to this object appendTo: 'body', // If false, the shift key will remain active until the // next key is (mouse) clicked on; if true it will stay // active until pressed again stickyShift: true, // Prevent pasting content into the area preventPaste: false, // caret places at the end of any text caretToEnd: false, // caret stays this many pixels from the edge of the input // while scrolling left/right; use "c" or "center" to center // the caret while scrolling scrollAdjustment: 10, // Set the max number of characters allowed in the input, // setting it to false disables this option maxLength: false, // allow inserting characters @ caret when maxLength is set maxInsert: true, // Mouse repeat delay - when clicking/touching a virtual // keyboard key, after this delay the key will start // repeating repeatDelay: 500, // Mouse repeat rate - after the repeatDelay, this is the // rate (characters per second) at which the key is // repeated. Added to simulate holding down a real keyboard // key and having it repeat. I haven't calculated the upper // limit of this rate, but it is limited to how fast the // javascript can process the keys. And for me, in Firefox, // it's around 20. repeatRate: 20, // resets the keyboard to the default keyset when visible resetDefault: false, // Event (namespaced) on the input to reveal the keyboard. // To disable it, just set it to ''. openOn: 'focus', // Event (namepaced) for when the character is added to the // input (clicking on the keyboard) keyBinding: 'mousedown touchstart', // enable/disable mousewheel functionality // enabling still depends on the mousewheel plugin useWheel: true, // combos (emulate dead keys) // if user inputs `a the script converts it to à, // ^o becomes ô, etc. useCombos: true, // if you add a new combo, you will need to update the // regex below combos: { // uncomment out the next line, then read the Combos //Regex section below '<': { 3: '\u2665' }, // turn <3 into ♥ - change regex below 'a': { e: "\u00e6" }, // ae ligature 'A': { E: "\u00c6" }, 'o': { e: "\u0153" }, // oe ligature 'O': { E: "\u0152" } }, // *** Methods *** // Callbacks - attach a function to any of these // callbacks as desired initialized: function(e, keyboard, el) {}, beforeVisible: function(e, keyboard, el) {}, visible: function(e, keyboard, el) {}, beforeInsert: function(e, keyboard, el, textToAdd) { return textToAdd; }, change: function(e, keyboard, el) {}, beforeClose: function(e, keyboard, el, accepted) {}, accepted: function(e, keyboard, el) {}, canceled: function(e, keyboard, el) {}, restricted: function(e, keyboard, el) {}, hidden: function(e, keyboard, el) {}, // called instead of base.switchInput // Go to next or prev inputs // goToNext = true, then go to next input; // if false go to prev // isAccepted is from autoAccept option or // true if user presses shift-enter switchInput: function(keyboard, goToNext, isAccepted) {}, /* // build key callback buildKey : function( keyboard, data ) { /* data = { // READ ONLY isAction: [boolean] true if key is an action key // name... may include decimal ascii value of character // prefix = 'ui-keyboard-' name : [string] key class name suffix value : [string] text inserted (non-action keys) title : [string] title attribute of key action : [string] keyaction name // html includes a <span> wrapping the text html : [string] HTML of the key; // DO NOT MODIFY THE ABOVE SETTINGS // use to modify key HTML $key : [object] jQuery selector of key already added to keyboard } * / data.$key.html('<span class="ui-keyboard-text">Foo</span>'); return data; }, */ // this callback is called just before the "beforeClose" // to check the value if the value is valid, return true // and the keyboard will continue as it should (close if // not always open, etc) // if the value is not value, return false and the clear // the keyboard value ( like this // "keyboard.$preview.val('');" ), if desired validate: function(keyboard, value, isClosing) { return true; } }) // activate the typing extension .addTyping({ showTyping: true, delay: 250 }); /* Combos Regex - You could change $.keyboard.comboRegex so that it applies to all keyboards, but if a specific layout language has a comboRegex defined, it has precidence over this setting. This regex is used to match combos to combine, the first part looks for the accent/letter and the second part matches the following letter so lets say you want to do something crazy like turn "<3" into a heart. Add this to the combos '<' : { 3: "\u2665" } and add a comma to the end if needed. Then change the regex to this: /([<`\'~\^\"ao])([a-z3])/mig; ( first part )( 2nd ) */ $.keyboard.language.love.comboRegex = /([<`\'~\^\"ao])([a-z3])/mig; /* if you look close at the regex, all that was added was "<" to the beginning of the first part; some characters need to be escaped with a backslash in front because they mean something else in regex. The second part has a 3 added after the 'a-z', so that should cover both parts :P */ // Typing Extension $('#icon').click(function() { var kb = $('#keyboard').getkeyboard(); // typeIn( text, delay, callback ); kb.reveal().typeIn(simulateTyping, 500, function() { // do something after text is added // kb.accept(); }); }); }); </script>