Add a preview of chosen keysets; display & position of the preview is accomplished through css.

• This extension adds data-attributes from selected keysets to every selected keyset.
• Make sure to include the keyboard-previewkeyset.css, or a modified version of that css.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="css/keyboard-basic.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>

<!-- preview keyset css & extension -->
<link href="css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="js/jquery.keyboard.extension-previewkeyset.js"></script>

This extension adds data-attributes to each key based on the values within the sets option - set to ["normal", "shift", "alt", "alt-shift"] by default.

Note: The data-attribute for the keyset is only added to the key if the keyset name is included in the extension sets option.

The below HTML shows the data-attributes added to the "a" key when an "international" layout is set with default extension settings.

<button class="ui-keyboard-button ui-keyboard-97" data-normal="a" data-shift="A" data-alt="á" data-alt-shift="Ä">
  <span class="ui-keyboard-text">a</span>
</button>

The below css is included in the keyboard-previewkeyset.css file. It is only shown here to provide reference, and does not need to be included unless the provided css file is not loaded, or if you need to alter the css to include custom meta keysets.

/* show mini-shift keyset with normal keyset */
.ui-keyboard-keyset-normal .ui-keyboard-button:after {
  content: attr(data-shift);
  font-size: 0.6em;
  color: #999;
  position: absolute;
  top: -1em;
  left: 2px;
  z-index: 200;
}

$('#keyboard')
  .keyboard({
    layout: 'international'
  })
  .previewKeyset({
    sets : [ 'normal', 'shift', 'alt', 'alt-shift' ]
  });

Default: [ 'normal', 'shift', 'alt', 'alt-shift' ]
Type: Array

Set the keyset names, including meta keysets, which the extension will process. The extension adds data-attributes for each of the named keysets which are then applied using css as shown in the css example above.