Wenn man auf das Icon klickt, wird eine virtuelle Tastatur eingeblendet , so wie man das von Handys kennt
Code
<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>