Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Theme

Mottie edited this page · 19 revisions

Theme / Style

  • As of v1.23.6,
    • Keys with more than one letter will now contain the text or character code in the name attribute and class name. For example,
      • A test key would end up with a class name of ui-keyboard-test and a data-name attribute of key-test.
      • A xyαβξz key would end up with a class name of ui-keyboard-xy-945-946-958z and a data-name attribute of xy-945-946-958z.
    • Removed data-original attributes from buttons.
    • Changed from using name attributes on the button to data-name.
  • The keyboard is set up to match the current jQuery UI theme, but it is still highly customizable with CSS.
  • The basic css, shown above, has no color styling but can have styling added to override the jQuery UI theme.
  • Action keys will have a class name of "ui-keyboard-{name}". So "bksp" (backspace) will have the class name of "ui-keyboard-bksp".
  • All other keys will have the unicode decimal value of the first character in the class name ("ui-keyboard-#"). So the tidle character has a unicode decimal value of 126, the class name will be "ui-keyboard-126". This is the same as typing ~ into the page or alt-0126 (hold down the alt key and press 0126 in the keypad).

  • Key sets are named as follows:

    • 'ui-keyboard-keyset-default' - Default (lower case keys)
    • 'ui-keyboard-keyset-shift' - Shift active (upper case keys).
    • 'ui-keyboard-keyset-alt' - Alt key set.
    • 'ui-keyboard-keyset-alt-shift' - Alt plus shift key set
    • 'ui-keyboard-keyset-meta#' - Meta key set (# can be any number)
    • 'ui-keyboard-keyset-meta#-shift' - Meta shift active (upper case keys).
    • 'ui-keyboard-keyset-meta#-alt' - Meta alt key set.
    • 'ui-keyboard-keyset-meta#-alt-shift' - Meta alt plus shift key set
  • If you would like an "x" within the input to clear the text input field, please use the input search type (demo). Older browsers will not support this type of input, and there is no plan to include more code to provide this functionality.

    <input id="keyboard" type="search">
  • Not included in the keyboard.css file is the styling of a browser supported placeholder. Use the following to style the placeholder text (each entry must be on a separate line):

    ::-webkit-input-placeholder { color: #aaa; }
    :-moz-placeholder { color: #aaa; }
    ::-moz-placeholder { color: #aaa; }
    :-ms-input-placeholder { color: #aaa; }
    /* plugin placeholder; not used if browser supported */
    .ui-keyboard-placeholder { color: #aaa; }
  • The basic keyboard markup is as follows, using the basic QWERTY layout (Note this format was changed in version 1.23.6); modified to include two example buttons - test & xαβξ:

<!-- Target Input (script is initialized on this element by targeting "#keyboard") -->
<input id="keyboard" class="ui-keyboard-input ui-widget-content ui-corner-all" type="text">

<!-- Keyboard wrapper (QWERTY layout); id = target input id + "_keyboard" -->
<div class="ui-keyboard ui-widget-content ui-widget ui-corner-all ui-helper-clearfix ui-keyboard-has-focus" role="textbox" id="keyboard_keyboard">

    <!-- preview window; not added if `usePreview:false` -->
    <div class="ui-keyboard-preview-wrapper">
        <!-- preview input/textarea clone (will include all attributes from original, except id which is removed) -->
        <input type="text" class="ui-widget-content ui-corner-all ui-keyboard-preview" role="textbox">
        <!-- hidden input clone used to calculate scroll position; this is always added, even if `usePreview:false` -->
        <input type="text" class="ui-widget-content ui-corner-all ui-keyboard-preview ui-keyboard-preview-clone" role="textbox">
    </div>

    <!-- ** normal/default key set ** -->
    <div name="normal" class="ui-keyboard-keyset ui-keyboard-keyset-normal" style="display: block;">
        <!-- first row -->
        <button class="ui-keyboard-button ui-keyboard-96 ui-state-default ui-corner-all" data-value="`" data-name="96" data-pos="0,0" data-action="`" data-curtxt="`" role="button" type="button"><span class="ui-keyboard-text">`</span></button>
        <button class="ui-keyboard-button ui-keyboard-49 ui-state-default ui-corner-all" data-value="1" data-name="49" data-pos="0,1" data-action="1" data-curtxt="1" role="button" type="button"><span class="ui-keyboard-text">1</span></button>
        <button class="ui-keyboard-button ui-keyboard-50 ui-state-default ui-corner-all" data-value="2" data-name="50" data-pos="0,2" data-action="2" data-curtxt="2" role="button" type="button"><span class="ui-keyboard-text">2</span></button>
        <button class="ui-keyboard-button ui-keyboard-51 ui-state-default ui-corner-all" data-value="3" data-name="51" data-pos="0,3" data-action="3" data-curtxt="3" role="button" type="button"><span class="ui-keyboard-text">3</span></button>
        <button class="ui-keyboard-button ui-keyboard-52 ui-state-default ui-corner-all" data-value="4" data-name="52" data-pos="0,4" data-action="4" data-curtxt="4" role="button" type="button"><span class="ui-keyboard-text">4</span></button>
        <button class="ui-keyboard-button ui-keyboard-53 ui-state-default ui-corner-all" data-value="5" data-name="53" data-pos="0,5" data-action="5" data-curtxt="5" role="button" type="button"><span class="ui-keyboard-text">5</span></button>
        <button class="ui-keyboard-button ui-keyboard-54 ui-state-default ui-corner-all" data-value="6" data-name="54" data-pos="0,6" data-action="6" data-curtxt="6" role="button" type="button"><span class="ui-keyboard-text">6</span></button>
        <button class="ui-keyboard-button ui-keyboard-55 ui-state-default ui-corner-all" data-value="7" data-name="55" data-pos="0,7" data-action="7" data-curtxt="7" role="button" type="button"><span class="ui-keyboard-text">7</span></button>
        <button class="ui-keyboard-button ui-keyboard-56 ui-state-default ui-corner-all" data-value="8" data-name="56" data-pos="0,8" data-action="8" data-curtxt="8" role="button" type="button"><span class="ui-keyboard-text">8</span></button>
        <button class="ui-keyboard-button ui-keyboard-57 ui-state-default ui-corner-all" data-value="9" data-name="57" data-pos="0,9" data-action="9" data-curtxt="9" role="button" type="button"><span class="ui-keyboard-text">9</span></button>
        <button class="ui-keyboard-button ui-keyboard-48 ui-state-default ui-corner-all" data-value="0" data-name="48" data-pos="0,10" data-action="0" data-curtxt="0" role="button" type="button"><span class="ui-keyboard-text">0</span></button>
        <button class="ui-keyboard-button ui-keyboard-45 ui-state-default ui-corner-all" data-value="-" data-name="45" data-pos="0,11" data-action="-" data-curtxt="-" role="button" type="button"><span class="ui-keyboard-text">-</span></button>
        <button class="ui-keyboard-button ui-keyboard-61 ui-state-default ui-corner-all" data-value="=" data-name="61" data-pos="0,12" data-action="=" data-curtxt="=" role="button" type="button"><span class="ui-keyboard-text">=</span></button>
        <button class="ui-keyboard-button ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="Bksp" data-name="bksp" data-pos="0,13" title="Backspace" data-action="bksp" data-original="Bksp" data-curtxt="Bksp" role="button" type="button"><span class="ui-keyboard-text">Bksp</span></button>
        <br class="ui-keyboard-button-endrow">

        <!-- second row -->
        <button class="ui-keyboard-button ui-keyboard-tab ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="? Tab" data-name="tab" data-pos="1,0" title="Tab" data-action="tab" data-original="? Tab" data-curtxt="? Tab" role="button" type="button"><span class="ui-keyboard-text">? Tab</span></button>
        <button class="ui-keyboard-button ui-keyboard-113 ui-state-default ui-corner-all" data-value="q" data-name="113" data-pos="1,1" data-action="q" data-curtxt="q" role="button" type="button"><span class="ui-keyboard-text">q</span></button>
        <button class="ui-keyboard-button ui-keyboard-119 ui-state-default ui-corner-all" data-value="w" data-name="119" data-pos="1,2" data-action="w" data-curtxt="w" role="button" type="button"><span class="ui-keyboard-text">w</span></button>
        <button class="ui-keyboard-button ui-keyboard-101 ui-state-default ui-corner-all" data-value="e" data-name="101" data-pos="1,3" data-action="e" data-curtxt="e" role="button" type="button"><span class="ui-keyboard-text">e</span></button>
        <button class="ui-keyboard-button ui-keyboard-114 ui-state-default ui-corner-all" data-value="r" data-name="114" data-pos="1,4" data-action="r" data-curtxt="r" role="button" type="button"><span class="ui-keyboard-text">r</span></button>
        <button class="ui-keyboard-button ui-keyboard-116 ui-state-default ui-corner-all" data-value="t" data-name="116" data-pos="1,5" data-action="t" data-curtxt="t" role="button" type="button"><span class="ui-keyboard-text">t</span></button>
        <button class="ui-keyboard-button ui-keyboard-121 ui-state-default ui-corner-all" data-value="y" data-name="121" data-pos="1,6" data-action="y" data-curtxt="y" role="button" type="button"><span class="ui-keyboard-text">y</span></button>
        <button class="ui-keyboard-button ui-keyboard-117 ui-state-default ui-corner-all" data-value="u" data-name="117" data-pos="1,7" data-action="u" data-curtxt="u" role="button" type="button"><span class="ui-keyboard-text">u</span></button>
        <button class="ui-keyboard-button ui-keyboard-105 ui-state-default ui-corner-all" data-value="i" data-name="105" data-pos="1,8" data-action="i" data-curtxt="i" role="button" type="button"><span class="ui-keyboard-text">i</span></button>
        <button class="ui-keyboard-button ui-keyboard-111 ui-state-default ui-corner-all" data-value="o" data-name="111" data-pos="1,9" data-action="o" data-curtxt="o" role="button" type="button"><span class="ui-keyboard-text">o</span></button>
        <button class="ui-keyboard-button ui-keyboard-112 ui-state-default ui-corner-all" data-value="p" data-name="112" data-pos="1,10" data-action="p" data-curtxt="p" role="button" type="button"><span class="ui-keyboard-text">p</span></button>
        <button class="ui-keyboard-button ui-keyboard-91 ui-state-default ui-corner-all" data-value="[" data-name="91" data-pos="1,11" data-action="[" data-curtxt="[" role="button" type="button"><span class="ui-keyboard-text">[</span></button>
        <button class="ui-keyboard-button ui-keyboard-93 ui-state-default ui-corner-all" data-value="]" data-name="93" data-pos="1,12" data-action="]" data-curtxt="]" role="button" type="button"><span class="ui-keyboard-text">]</span></button>
        <button class="ui-keyboard-button ui-keyboard-92 ui-state-default ui-corner-all" data-value="\" data-name="92" data-pos="1,13" data-action="\" data-curtxt="\" role="button" type="button"><span class="ui-keyboard-text">\</span></button>
        <br class="ui-keyboard-button-endrow">

        <!-- third row -->
        <button class="ui-keyboard-button ui-keyboard-97 ui-state-default ui-corner-all" data-value="a" data-name="97" data-pos="2,0" data-action="a" data-curtxt="a" role="button" type="button"><span class="ui-keyboard-text">a</span></button>
        <button class="ui-keyboard-button ui-keyboard-115 ui-state-default ui-corner-all" data-value="s" data-name="115" data-pos="2,1" data-action="s" data-curtxt="s" role="button" type="button"><span class="ui-keyboard-text">s</span></button>
        <button class="ui-keyboard-button ui-keyboard-100 ui-state-default ui-corner-all" data-value="d" data-name="100" data-pos="2,2" data-action="d" data-curtxt="d" role="button" type="button"><span class="ui-keyboard-text">d</span></button>
        <button class="ui-keyboard-button ui-keyboard-102 ui-state-default ui-corner-all" data-value="f" data-name="102" data-pos="2,3" data-action="f" data-curtxt="f" role="button" type="button"><span class="ui-keyboard-text">f</span></button>
        <button class="ui-keyboard-button ui-keyboard-103 ui-state-default ui-corner-all" data-value="g" data-name="103" data-pos="2,4" data-action="g" data-curtxt="g" role="button" type="button"><span class="ui-keyboard-text">g</span></button>
        <button class="ui-keyboard-button ui-keyboard-104 ui-state-default ui-corner-all" data-value="h" data-name="104" data-pos="2,5" data-action="h" data-curtxt="h" role="button" type="button"><span class="ui-keyboard-text">h</span></button>
        <button class="ui-keyboard-button ui-keyboard-106 ui-state-default ui-corner-all" data-value="j" data-name="106" data-pos="2,6" data-action="j" data-curtxt="j" role="button" type="button"><span class="ui-keyboard-text">j</span></button>
        <button class="ui-keyboard-button ui-keyboard-107 ui-state-default ui-corner-all" data-value="k" data-name="107" data-pos="2,7" data-action="k" data-curtxt="k" role="button" type="button"><span class="ui-keyboard-text">k</span></button>
        <button class="ui-keyboard-button ui-keyboard-108 ui-state-default ui-corner-all" data-value="l" data-name="108" data-pos="2,8" data-action="l" data-curtxt="l" role="button" type="button"><span class="ui-keyboard-text">l</span></button>
        <button class="ui-keyboard-button ui-keyboard-59 ui-state-default ui-corner-all" data-value=";" data-name="59" data-pos="2,9" data-action=";" data-curtxt=";" role="button" type="button"><span class="ui-keyboard-text">;</span></button>
        <button class="ui-keyboard-button ui-keyboard-39 ui-state-default ui-corner-all" data-value="'" data-name="39" data-pos="2,10" data-action="'" data-curtxt="'" role="button" type="button"><span class="ui-keyboard-text">'</span></button>
        <button class="ui-keyboard-button ui-keyboard-enter ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Enter" data-name="enter" data-pos="2,11" title="Enter ?" data-action="enter" data-original="Enter" data-curtxt="Enter" role="button" type="button"><span class="ui-keyboard-text">Enter</span></button>
        <br class="ui-keyboard-button-endrow">

        <!-- fourth row -->
        <button class="ui-keyboard-button ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-keyboard-hasactivestate" data-value="Shift" data-name="shift" data-pos="3,0" title="Shift" data-action="shift" data-original="Shift" data-curtxt="Shift" role="button" type="button"><span class="ui-keyboard-text">Shift</span></button>
        <button class="ui-keyboard-button ui-keyboard-122 ui-state-default ui-corner-all" data-value="z" data-name="122" data-pos="3,1" data-action="z" data-curtxt="z" role="button" type="button"><span class="ui-keyboard-text">z</span></button>
        <button class="ui-keyboard-button ui-keyboard-120 ui-state-default ui-corner-all" data-value="x" data-name="120" data-pos="3,2" data-action="x" data-curtxt="x" role="button" type="button"><span class="ui-keyboard-text">x</span></button>
        <button class="ui-keyboard-button ui-keyboard-99 ui-state-default ui-corner-all" data-value="c" data-name="99" data-pos="3,3" data-action="c" data-curtxt="c" role="button" type="button"><span class="ui-keyboard-text">c</span></button>
        <button class="ui-keyboard-button ui-keyboard-118 ui-state-default ui-corner-all" data-value="v" data-name="118" data-pos="3,4" data-action="v" data-curtxt="v" role="button" type="button"><span class="ui-keyboard-text">v</span></button>
        <button class="ui-keyboard-button ui-keyboard-98 ui-state-default ui-corner-all" data-value="b" data-name="98" data-pos="3,5" data-action="b" data-curtxt="b" role="button" type="button"><span class="ui-keyboard-text">b</span></button>
        <button class="ui-keyboard-button ui-keyboard-110 ui-state-default ui-corner-all" data-value="n" data-name="110" data-pos="3,6" data-action="n" data-curtxt="n" role="button" type="button"><span class="ui-keyboard-text">n</span></button>
        <button class="ui-keyboard-button ui-keyboard-109 ui-state-default ui-corner-all" data-value="m" data-name="109" data-pos="3,7" data-action="m" data-curtxt="m" role="button" type="button"><span class="ui-keyboard-text">m</span></button>
        <button class="ui-keyboard-button ui-keyboard-44 ui-state-default ui-corner-all" data-value="," data-name="44" data-pos="3,8" data-action="," data-curtxt="," role="button" type="button"><span class="ui-keyboard-text">,</span></button>
        <button class="ui-keyboard-button ui-keyboard-46 ui-state-default ui-corner-all" data-value="." data-name="46" data-pos="3,9" data-action="." data-curtxt="." role="button" type="button"><span class="ui-keyboard-text">.</span></button>
        <button class="ui-keyboard-button ui-keyboard-47 ui-state-default ui-corner-all" data-value="/" data-name="47" data-pos="3,10" data-action="/" data-curtxt="/" role="button" type="button"><span class="ui-keyboard-text">/</span></button>
        <button class="ui-keyboard-button ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-keyboard-hasactivestate" data-value="Shift" data-name="shift" data-pos="3,11" title="Shift" data-action="shift" data-original="Shift" data-curtxt="Shift" role="button" type="button"><span class="ui-keyboard-text">Shift</span></button>
        <br class="ui-keyboard-button-endrow">

        <button class="ui-keyboard-button ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Accept" data-name="accept" data-pos="4,0" title="Accept" data-action="accept" data-original="Accept" data-curtxt="Accept" role="button" type="button"><span class="ui-keyboard-text">Accept</span></button>
        <button class="ui-keyboard-button ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="&amp;#160;" data-name="space" data-pos="4,1" title="Space" data-action="space" data-original="&amp;#160;" data-curtxt="&amp;#160;" role="button" type="button"><span class="ui-keyboard-text">&amp;#160;</span></button>
        <button class="ui-keyboard-button ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Cancel" data-name="cancel" data-pos="4,2" title="Cancel" data-action="cancel" data-original="Cancel" data-curtxt="Cancel" role="button" type="button"><span class="ui-keyboard-text">Cancel</span></button>

        <!-- "test" button added to qwerty layout to show the changes to the
            "name" attribute & "ui-keyboard-test" class name -->
        <button class="ui-keyboard-button ui-keyboard-test ui-keyboard-widekey ui-state-default ui-corner-all" data-value="test" data-name="test" data-pos="4,3" data-action="test" data-original="test" data-curtxt="test" role="button" type="button"><span class="ui-keyboard-text">test</span></button>

        <!-- "xαβξ" button added to qwerty layout to show how the "name" &
            "ui-keyboard-120-945-946-958" class names are different when not using a-z or 0-9 -->
        <button class="ui-keyboard-button ui-keyboard-xy-945-946-958z ui-keyboard-widekey ui-state-default ui-corner-all" data-value="xyαβξz" data-name="xy-945-946-958z" data-pos="4,4" title="" data-action="xyαβξz" data-curtxt="xyαβξz" role="button" type="button"><span class="ui-keyboard-text">xyαβξz</span></button>

        <br class="ui-keyboard-button-endrow">

    </div>
    <!--  ** end normal/default keyset ** -->

    <!-- ** shift key set ** -->
    <div name="shift" class="ui-keyboard-keyset ui-keyboard-keyset-shift" style="display: none;">

        <button class="ui-keyboard-button ui-keyboard-126 ui-state-default ui-corner-all" data-value="~" data-name="126" data-pos="0,0" data-action="~" data-curtxt="~" role="button" type="button"><span class="ui-keyboard-text">~</span></button>
        <button class="ui-keyboard-button ui-keyboard-33 ui-state-default ui-corner-all" data-value="!" data-name="33" data-pos="0,1" data-action="!" data-curtxt="!" role="button" type="button"><span class="ui-keyboard-text">!</span></button>
        <button class="ui-keyboard-button ui-keyboard-64 ui-state-default ui-corner-all" data-value="@" data-name="64" data-pos="0,2" data-action="@" data-curtxt="@" role="button" type="button"><span class="ui-keyboard-text">@</span></button>
        <button class="ui-keyboard-button ui-keyboard-35 ui-state-default ui-corner-all" data-value="#" data-name="35" data-pos="0,3" data-action="#" data-curtxt="#" role="button" type="button"><span class="ui-keyboard-text">#</span></button>
        <button class="ui-keyboard-button ui-keyboard-36 ui-state-default ui-corner-all" data-value="$" data-name="36" data-pos="0,4" data-action="$" data-curtxt="$" role="button" type="button"><span class="ui-keyboard-text">$</span></button>
        <button class="ui-keyboard-button ui-keyboard-37 ui-state-default ui-corner-all" data-value="%" data-name="37" data-pos="0,5" data-action="%" data-curtxt="%" role="button" type="button"><span class="ui-keyboard-text">%</span></button>
        <button class="ui-keyboard-button ui-keyboard-94 ui-state-default ui-corner-all" data-value="^" data-name="94" data-pos="0,6" data-action="^" data-curtxt="^" role="button" type="button"><span class="ui-keyboard-text">^</span></button>
        <button class="ui-keyboard-button ui-keyboard-38 ui-state-default ui-corner-all" data-value="&amp;" data-name="38" data-pos="0,7" data-action="&amp;" data-original="&amp;" data-curtxt="&amp;" role="button" type="button"><span class="ui-keyboard-text">&amp;</span></button>
        <button class="ui-keyboard-button ui-keyboard-42 ui-state-default ui-corner-all" data-value="*" data-name="42" data-pos="0,8" data-action="*" data-curtxt="*" role="button" type="button"><span class="ui-keyboard-text">*</span></button>
        <button class="ui-keyboard-button ui-keyboard-40 ui-state-default ui-corner-all" data-value="(" data-name="40" data-pos="0,9" data-action="(" data-curtxt="(" role="button" type="button"><span class="ui-keyboard-text">(</span></button>
        <button class="ui-keyboard-button ui-keyboard-41 ui-state-default ui-corner-all" data-value=")" data-name="41" data-pos="0,10" data-action=")" data-curtxt=")" role="button" type="button"><span class="ui-keyboard-text">)</span></button>
        <button class="ui-keyboard-button ui-keyboard-95 ui-state-default ui-corner-all" data-value="_" data-name="95" data-pos="0,11" data-action="_" data-curtxt="_" role="button" type="button"><span class="ui-keyboard-text">_</span></button>
        <button class="ui-keyboard-button ui-keyboard-43 ui-state-default ui-corner-all" data-value="+" data-name="43" data-pos="0,12" data-action="+" data-curtxt="+" role="button" type="button"><span class="ui-keyboard-text">+</span></button>
        <button class="ui-keyboard-button ui-keyboard-bksp ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="Bksp" data-name="bksp" data-pos="0,13" title="Backspace" data-action="bksp" data-original="Bksp" data-curtxt="Bksp" role="button" type="button"><span class="ui-keyboard-text">Bksp</span></button>
        <br class="ui-keyboard-button-endrow">

        <button class="ui-keyboard-button ui-keyboard-tab ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="? Tab" data-name="tab" data-pos="1,0" title="Tab" data-action="tab" data-original="? Tab" data-curtxt="? Tab" role="button" type="button"><span class="ui-keyboard-text">? Tab</span></button>
        <button class="ui-keyboard-button ui-keyboard-81 ui-state-default ui-corner-all" data-value="Q" data-name="81" data-pos="1,1" data-action="Q" data-curtxt="Q" role="button" type="button"><span class="ui-keyboard-text">Q</span></button>
        <button class="ui-keyboard-button ui-keyboard-87 ui-state-default ui-corner-all" data-value="W" data-name="87" data-pos="1,2" data-action="W" data-curtxt="W" role="button" type="button"><span class="ui-keyboard-text">W</span></button>
        <button class="ui-keyboard-button ui-keyboard-69 ui-state-default ui-corner-all" data-value="E" data-name="69" data-pos="1,3" data-action="E" data-curtxt="E" role="button" type="button"><span class="ui-keyboard-text">E</span></button>
        <button class="ui-keyboard-button ui-keyboard-82 ui-state-default ui-corner-all" data-value="R" data-name="82" data-pos="1,4" data-action="R" data-curtxt="R" role="button" type="button"><span class="ui-keyboard-text">R</span></button>
        <button class="ui-keyboard-button ui-keyboard-84 ui-state-default ui-corner-all" data-value="T" data-name="84" data-pos="1,5" data-action="T" data-curtxt="T" role="button" type="button"><span class="ui-keyboard-text">T</span></button>
        <button class="ui-keyboard-button ui-keyboard-89 ui-state-default ui-corner-all" data-value="Y" data-name="89" data-pos="1,6" data-action="Y" data-curtxt="Y" role="button" type="button"><span class="ui-keyboard-text">Y</span></button>
        <button class="ui-keyboard-button ui-keyboard-85 ui-state-default ui-corner-all" data-value="U" data-name="85" data-pos="1,7" data-action="U" data-curtxt="U" role="button" type="button"><span class="ui-keyboard-text">U</span></button>
        <button class="ui-keyboard-button ui-keyboard-73 ui-state-default ui-corner-all" data-value="I" data-name="73" data-pos="1,8" data-action="I" data-curtxt="I" role="button" type="button"><span class="ui-keyboard-text">I</span></button>
        <button class="ui-keyboard-button ui-keyboard-79 ui-state-default ui-corner-all" data-value="O" data-name="79" data-pos="1,9" data-action="O" data-curtxt="O" role="button" type="button"><span class="ui-keyboard-text">O</span></button>
        <button class="ui-keyboard-button ui-keyboard-80 ui-state-default ui-corner-all" data-value="P" data-name="80" data-pos="1,10" data-action="P" data-curtxt="P" role="button" type="button"><span class="ui-keyboard-text">P</span></button>
        <button class="ui-keyboard-button ui-keyboard-123 ui-state-default ui-corner-all" data-value="{" data-name="123" data-pos="1,11" data-action="{" data-curtxt="{" role="button" type="button"><span class="ui-keyboard-text">{</span></button>
        <button class="ui-keyboard-button ui-keyboard-125 ui-state-default ui-corner-all" data-value="}" data-name="125" data-pos="1,12" data-action="}" data-curtxt="}" role="button" type="button"><span class="ui-keyboard-text">}</span></button>
        <button class="ui-keyboard-button ui-keyboard-124 ui-state-default ui-corner-all" data-value="|" data-name="124" data-pos="1,13" data-action="|" data-curtxt="|" role="button" type="button"><span class="ui-keyboard-text">|</span></button>
        <br class="ui-keyboard-button-endrow">

        <button class="ui-keyboard-button ui-keyboard-65 ui-state-default ui-corner-all" data-value="A" data-name="65" data-pos="2,0" data-action="A" data-curtxt="A" role="button" type="button"><span class="ui-keyboard-text">A</span></button>
        <button class="ui-keyboard-button ui-keyboard-83 ui-state-default ui-corner-all" data-value="S" data-name="83" data-pos="2,1" data-action="S" data-curtxt="S" role="button" type="button"><span class="ui-keyboard-text">S</span></button>
        <button class="ui-keyboard-button ui-keyboard-68 ui-state-default ui-corner-all" data-value="D" data-name="68" data-pos="2,2" data-action="D" data-curtxt="D" role="button" type="button"><span class="ui-keyboard-text">D</span></button>
        <button class="ui-keyboard-button ui-keyboard-70 ui-state-default ui-corner-all" data-value="F" data-name="70" data-pos="2,3" data-action="F" data-curtxt="F" role="button" type="button"><span class="ui-keyboard-text">F</span></button>
        <button class="ui-keyboard-button ui-keyboard-71 ui-state-default ui-corner-all" data-value="G" data-name="71" data-pos="2,4" data-action="G" data-curtxt="G" role="button" type="button"><span class="ui-keyboard-text">G</span></button>
        <button class="ui-keyboard-button ui-keyboard-72 ui-state-default ui-corner-all" data-value="H" data-name="72" data-pos="2,5" data-action="H" data-curtxt="H" role="button" type="button"><span class="ui-keyboard-text">H</span></button>
        <button class="ui-keyboard-button ui-keyboard-74 ui-state-default ui-corner-all" data-value="J" data-name="74" data-pos="2,6" data-action="J" data-curtxt="J" role="button" type="button"><span class="ui-keyboard-text">J</span></button>
        <button class="ui-keyboard-button ui-keyboard-75 ui-state-default ui-corner-all" data-value="K" data-name="75" data-pos="2,7" data-action="K" data-curtxt="K" role="button" type="button"><span class="ui-keyboard-text">K</span></button>
        <button class="ui-keyboard-button ui-keyboard-76 ui-state-default ui-corner-all" data-value="L" data-name="76" data-pos="2,8" data-action="L" data-curtxt="L" role="button" type="button"><span class="ui-keyboard-text">L</span></button>
        <button class="ui-keyboard-button ui-keyboard-58 ui-state-default ui-corner-all" data-value=":" data-name="58" data-pos="2,9" data-action=":" data-curtxt=":" role="button" type="button"><span class="ui-keyboard-text">:</span></button>
        <button class="ui-keyboard-button ui-keyboard-34 ui-state-default ui-corner-all" data-value="&quot;" data-name="34" data-pos="2,10" data-action="&quot;" data-original="&quot;" data-curtxt="&quot;" role="button" type="button"><span class="ui-keyboard-text">"</span></button>
        <button class="ui-keyboard-button ui-keyboard-enter ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Enter" data-name="enter" data-pos="2,11" title="Enter ?" data-action="enter" data-original="Enter" data-curtxt="Enter" role="button" type="button"><span class="ui-keyboard-text">Enter</span></button>
        <br class="ui-keyboard-button-endrow">

        <button class="ui-keyboard-button ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-keyboard-hasactivestate" data-value="Shift" data-name="shift" data-pos="3,0" title="Shift" data-action="shift" data-original="Shift" data-curtxt="Shift" role="button" type="button"><span class="ui-keyboard-text">Shift</span></button>
        <button class="ui-keyboard-button ui-keyboard-90 ui-state-default ui-corner-all" data-value="Z" data-name="90" data-pos="3,1" data-action="Z" data-curtxt="Z" role="button" type="button"><span class="ui-keyboard-text">Z</span></button>
        <button class="ui-keyboard-button ui-keyboard-88 ui-state-default ui-corner-all" data-value="X" data-name="88" data-pos="3,2" data-action="X" data-curtxt="X" role="button" type="button"><span class="ui-keyboard-text">X</span></button>
        <button class="ui-keyboard-button ui-keyboard-67 ui-state-default ui-corner-all" data-value="C" data-name="67" data-pos="3,3" data-action="C" data-curtxt="C" role="button" type="button"><span class="ui-keyboard-text">C</span></button>
        <button class="ui-keyboard-button ui-keyboard-86 ui-state-default ui-corner-all" data-value="V" data-name="86" data-pos="3,4" data-action="V" data-curtxt="V" role="button" type="button"><span class="ui-keyboard-text">V</span></button>
        <button class="ui-keyboard-button ui-keyboard-66 ui-state-default ui-corner-all" data-value="B" data-name="66" data-pos="3,5" data-action="B" data-curtxt="B" role="button" type="button"><span class="ui-keyboard-text">B</span></button>
        <button class="ui-keyboard-button ui-keyboard-78 ui-state-default ui-corner-all" data-value="N" data-name="78" data-pos="3,6" data-action="N" data-curtxt="N" role="button" type="button"><span class="ui-keyboard-text">N</span></button>
        <button class="ui-keyboard-button ui-keyboard-77 ui-state-default ui-corner-all" data-value="M" data-name="77" data-pos="3,7" data-action="M" data-curtxt="M" role="button" type="button"><span class="ui-keyboard-text">M</span></button>
        <button class="ui-keyboard-button ui-keyboard-60 ui-state-default ui-corner-all" data-value="<" data-name="60" data-pos="3,8" data-action="<" data-curtxt="<" role="button" type="button"><span class="ui-keyboard-text">&lt;</span></button>
        <button class="ui-keyboard-button ui-keyboard-62 ui-state-default ui-corner-all" data-value=">" data-name="62" data-pos="3,9" data-action=">" data-curtxt=">" role="button" type="button"><span class="ui-keyboard-text">&gt;</span></button>
        <button class="ui-keyboard-button ui-keyboard-63 ui-state-default ui-corner-all" data-value="?" data-name="63" data-pos="3,10" data-action="?" data-curtxt="?" role="button" type="button"><span class="ui-keyboard-text">?</span></button>
        <button class="ui-keyboard-button ui-keyboard-shift ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-keyboard-hasactivestate" data-value="Shift" data-name="shift" data-pos="3,11" title="Shift" data-action="shift" data-original="Shift" data-curtxt="Shift" role="button" type="button"><span class="ui-keyboard-text">Shift</span></button>
        <br class="ui-keyboard-button-endrow">

        <button class="ui-keyboard-button ui-keyboard-accept ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Accept" data-name="accept" data-pos="4,0" title="Accept" data-action="accept" data-original="Accept" data-curtxt="Accept" role="button" type="button"><span class="ui-keyboard-text">Accept</span></button>
        <button class="ui-keyboard-button ui-keyboard-space ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all" data-value="&amp;#160;" data-name="space" data-pos="4,1" title="Space" data-action="space" data-original="&amp;#160;" data-curtxt="&amp;#160;" role="button" type="button"><span class="ui-keyboard-text">&amp;#160;</span></button>
        <button class="ui-keyboard-button ui-keyboard-cancel ui-keyboard-widekey ui-keyboard-actionkey ui-state-default ui-corner-all ui-state-active" data-value="Cancel" data-name="cancel" data-pos="4,2" title="Cancel" data-action="cancel" data-original="Cancel" data-curtxt="Cancel" role="button" type="button"><span class="ui-keyboard-text">Cancel</span></button>

        <!-- "TEST" button added to qwerty layout to show the changes to the
            "name" attribute & "ui-keyboard-TEST" class name -->
        <button class="ui-keyboard-button ui-keyboard-TEST ui-keyboard-widekey ui-state-default ui-corner-all" data-value="TEST" data-name="TEST" data-pos="4,3" data-action="TEST" data-original="TEST" data-curtxt="TEST" role="button" type="button"><span class="ui-keyboard-text">TEST</span></button>

        <!-- "XΑΒΞ" button added to qwerty layout to show how the "name" &
            "ui-keyboard-88-913-914-926" class names are different when not using a-z or 0-9 -->
        <button class="ui-keyboard-button ui-keyboard-88-913-914-926 ui-keyboard-widekey ui-state-default ui-corner-all" data-value="XΑΒΞ" data-name="88-913-914-926" data-pos="4,4" data-action="XΑΒΞ" data-original="XΑΒΞ" data-curtxt="XΑΒΞ" role="button" type="button"><span class="ui-keyboard-text">XΑΒΞ</span></button>

        <br class="ui-keyboard-button-endrow">

    </div> <!--  ** end shift keyset ** -->

</div> <!-- end wrapper -->

The "altKeysPopup" extension will create an overlay and popup container within the "ui-keyboard" container, with this markup (default "a" key popup)

<div class="ui-keyboard-overlay" style="width: 551px; height: 233px;">
  <div class="ui-keyboard-popup ui-widget-content ui-widget ui-corner-all ui-helper-clearfix" style="position: relative; top: 0px; left: 0px;">
    <button class="ui-keyboard-button ui-keyboard-229 ui-state-default ui-corner-all" data-value="å" data-name="229" data-pos="0,0" data-action="å" data-curtxt="å" role="button" type="button"><span class="ui-keyboard-text">å</span></button>
    <button class="ui-keyboard-button ui-keyboard-230 ui-state-default ui-corner-all" data-value="æ" data-name="230" data-pos="0,1" data-action="æ" data-curtxt="æ" role="button" type="button"><span class="ui-keyboard-text">æ</span></button>
    <button class="ui-keyboard-button ui-keyboard-257 ui-state-default ui-corner-all" data-value="a" data-name="257" data-pos="0,2" data-action="a" data-curtxt="a" role="button" type="button"><span class="ui-keyboard-text">a</span></button>
    <button class="ui-keyboard-button ui-keyboard-259 ui-state-default ui-corner-all" data-value="a" data-name="259" data-pos="0,3" data-action="a" data-curtxt="a" role="button" type="button"><span class="ui-keyboard-text">a</span></button>
    <button class="ui-keyboard-button ui-keyboard-261 ui-state-default ui-corner-all" data-value="a" data-name="261" data-pos="0,4" data-action="a" data-curtxt="a" role="button" type="button"><span class="ui-keyboard-text">a</span></button>
    <button class="ui-keyboard-button ui-keyboard-224 ui-state-default ui-corner-all" data-value="à" data-name="224" data-pos="0,5" data-action="à" data-curtxt="à" role="button" type="button"><span class="ui-keyboard-text">à</span></button>
    <button class="ui-keyboard-button ui-keyboard-225 ui-state-default ui-corner-all" data-value="á" data-name="225" data-pos="0,6" data-action="á" data-curtxt="á" role="button" type="button"><span class="ui-keyboard-text">á</span></button>
    <button class="ui-keyboard-button ui-keyboard-226 ui-state-default ui-corner-all" data-value="â" data-name="226" data-pos="0,7" data-action="â" data-curtxt="â" role="button" type="button"><span class="ui-keyboard-text">â</span></button>
    <button class="ui-keyboard-button ui-keyboard-227 ui-state-default ui-corner-all" data-value="ã" data-name="227" data-pos="0,8" data-action="ã" data-curtxt="ã" role="button" type="button"><span class="ui-keyboard-text">ã</span></button>
    <button class="ui-keyboard-button ui-keyboard-228 ui-state-default ui-corner-all" data-value="ä" data-name="228" data-pos="0,9" data-action="ä" data-curtxt="ä" role="button" type="button"><span class="ui-keyboard-text">ä</span></button>
  </div>
</div>

Wiki Pages: Home | FAQ | Setup | Usage | Options ( Layout, Language, Usability, Actions ) | Methods | Theme | Log

Something went wrong with that request. Please try again.