Extension AltKeysPopup

AltKeysPopup (Demo)

Adds alternative keys to display in a popup window after pressing and holding down a specified keyboard key. For example, pressing and holding down the "a" key would show these default alternatives: å æ ā ă ą à á â ã ä

Setup

Page Head

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- jQuery UI theme or Bootstrap (optional, if you create a custom theme) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery UI position utility (optional, if you position the keyboard yourself) -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

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

<!-- optional plugins -->
<script src="js/jquery.mousewheel.js"></script>

CSS

This CSS has been included in the keyboard.css file to style the keyboard overlay & popup button container.

/*** Alt-Keys Popup extension (included in the keyboard.css file) ***/
/* 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 */
}

Javascript

// add some extra popups
$.extend( $.keyboard.altKeys, {
  // additional "fancy" exclamation points!
  '!' : '\u00a1 \u2762 \u2763',
  // action keys the "!!" makes the button get the "ui-state-active"
  // (set by the css.buttonActive option)
  'enter' : '{!!clear} {!!a} {!!c}',
  // smileys
  '\u263a' : '\u2639 \u263b'
});

$('#keyboard')
  .keyboard(options)
  .addAltKeyPopup({
    // time to hold down a button in milliseconds to trigger a popup
    holdTime : 500,
    // events triggered when popup is visible & hidden
    popupVisible  : 'popup-visible',
    popupHidden   : 'popup-hidden',
    // optional reposition popup callback function
    popupPosition : function(keyboard, data) {
      console.log(data);
      /*
      {
        $kb         : Keyboard element (jQuery object),
        $key        : Clicked key element (jQuery object),
        $popup      : Popup container (jQuery object),
        kbHeight    : Keyboard element outer height,
        kbWidth     : Keyboard element outer width,
        popupHeight : Popup container height,
        popupWidth  : Popup container width,
        popupLeft   : Popup container left position,
        popupTop    : Popup container top position
      }
      example (shift popup left 100px):
      data.$popup.css('left', data.popupLeft - 100);
      */
    }
  })
  // optional: use popup visible event to do something to the overlay,
  // popup container or buttons
  .on('popup-visible', function( keyboard ) {
    // access the overlay from keyboard.altKeyPopup_$overlay
    // or keys container from keyboard.altKeyPopup_$overlay.find('.ui-keyboard-popup')
    // or keys from keyboard.altKeyPopup_$overlay.find('.ui-keyboard-button')
    var keyboard = $(this).data('keyboard');
    // reposition the popup - setting top to zero & left to zero will
    // overlap the preview input, if usePreview is true
    keyboard.altKeyPopup_$overlay.find('.ui-keyboard-popup').css({
      top: 0,
      left: 0
    });
  })
  // popup close
  .on('popup-hidden', function( keyboard ) {
    // event fired when altkeypopup closes - added in v1.25.11
  });

Options

holdTime

Default: 500
Type: Number

Sets the time in milliseconds the user must hold down the target button before the popup appears

popupVisible

Default: "popup-visible"
Type: String

Event triggered on the input when a popup becomes visible

popupHidden

Default: "popup-hidden"
Type: String

Event triggered on the input when a popup is hidden

popupPosition

Default: null
Type: Function or null

Optional reposition popup callback function; this is called after the popup has been positioned by the jQuery UI position utility (if included)

The data parameter contains lots of useful information.

popupPosition : function(keyboard, data) {
  /* data parameter contains:
  {
    $kb         : Keyboard element (jQuery object),
    $key        : Clicked key element (jQuery object),
    $popup      : Popup container (jQuery object),
    kbHeight    : Keyboard element outer height,
    kbWidth     : Keyboard element outer width,
    popupHeight : Popup container height,
    popupWidth  : Popup container width,
    popupLeft   : Popup container left position,
    popupTop    : Popup container top position
  }
  */
  // example (shift popup left 100px):
  data.$popup.css('left', data.popupLeft - 100);
}