Possible to simulate a keyboard shortcut being pressed by clicking on link using JavaScript?

Question

Hi,

I'm creating a touch application in the "Itunes LP" format which uses html, css and javascript within Itunes to create a "digital LP". The application will have several LP's to explore through a touchscreen. In fullscreen mode (within Itunes and the LP) you can press the "esc key" to exit the LP and enter "coverflow view" where you can choose another LP to explore. I will have no keyboard or mouse so I need to create a button/link that do one thing when the user clicks on this link and that is to simualte the ESC key being pressed.

So my question is; Is it possible to simulate a keyboard shortcut being pressed using JavaScript in a link? My link would be "Home" and by clicking on this link the browser behaves as the ESC key was pressed.

Any tips on this would be most helpful. Thanks!

David

ADDED 30/6;

(Part of TuneKit.js for Itunes LP)

    /* ==================== Keyboard Navigation ==================== */

TKSpatialNavigationManager.prototype.handleKeydown = function (event) {

  var key = event.keyCode;

  // check if our controller knows what it's doing and let it take over in case it does
  if (this._managedController.wantsToHandleKey(key)) {
    // prevent default actions
    event.stopPropagation();
    event.preventDefault();
    // have the controller do what it think is best in this case
    this._managedController.keyWasPressed(key);
    return;
  }

  // reset the sound
  TKSpatialNavigationManager.soundToPlay = null;

  // check we know about this key, otherwise, do nothing
  if (TKSpatialNavigationManagerKnownKeys.indexOf(key) == -1) {
    return;
  }

  var navigation = TKNavigationController.sharedNavigation;
  // first, check if we're hitting the back button on the home screen, in which case
  // we don't want to do anything and let the User Agent do what's right to exit
  if (event.keyCode == KEYBOARD_BACKSPACE && navigation.topController === homeController) {
    return;
  }

  // before we go any further, prevent the default action from happening
  event.stopPropagation();
  event.preventDefault();

  // check if we're busy doing other things
  if (TKSpatialNavigationManager.busyControllers > 0) {
    return;
  }
  // see if we pressed esc. so we can pop to previous controller
  if (event.keyCode == KEYBOARD_BACKSPACE) {
    var top_controller = navigation.topController;
    if (top_controller !== homeController) {
      // at any rate, play the exit sound
      TKUtils.playSound(SOUND_EXIT);
      // see if the top controller has a custom place to navigate to with the back button
      if (top_controller.backButton instanceof Element && top_controller.backButton._navigationData !== undefined) {
        navigation.pushController(TKController.resolveController(top_controller.backButton._navigationData.controller));
      }
      // otherwise, just pop the controller
      else {
        navigation.popController();
      }
    }
  }

*My script will look like this:*

    var albumHelper = {};

albumHelper.playAlbum = function() {
  var playlist = bookletController.buildPlaylist(appData.songs);
  playlist.play();
};

var event = {};

event.keyCode = function() {
  var escapeKeyProxy = TKSpatialNavigationManager.prototype.handleKeydown({'keyCode':27});
    document.getElementById('btnExitFullScreen').onclick = escapeKeyProxy;
};

var homeController = new TKController({
  id: 'home',
  actions : [
    { selector: '.menu > .play', action: albumHelper.playAlbum },
    { selector: '.menu > .linernotes', action: event.keyCode }
  ],
  navigatesTo : [
    { selector: '.menu > .songs', controller: 'songs' },
    { selector: '.menu > .photos', controller: 'photos' },
    { selector: '.menu > .videos', controller: 'videos' },
    { selector: '.menu > .credits', controller: 'credits' }
  ],
  // make the PLAY button be default highlight
  highlightedElement : '.menu > .play'
});

So what I want is the .linernotes' image, when clicked, simulate a ESC key being pushed!

Answer 1

This answer assumes there is a JS function that the iTunes LP application uses to exit full-screen.

Though you probably can, you shouldn't have to simulate the event. The Key event you're working with is tied by either an event listener or an event handler to a function (in this case, a function that exits full-screen mode). You should be able to create a button and tie it (by a similar event listener or an event handler) to the same function.

You can't tie it directly, because the key events pass information about which key was pressed, and mouse events don't, so you need to send it through a proxy. Your code might look something like this. In this case, the code that takes in the Key event in the iTunes LP library would be called iTunesLPKeyPressEvent. I have no idea what it's actually called.

var escapeKeyProxy = function() {
    iTunesLPKeyPressEvent({'keyCode':27});
} 
document.getElementById('btnExitFullScreen').onclick = escapeKeyProxy;

You may need to massage this a bit, but the basic idea should work.

[EDIT] Based on your update, I'd say that TKSpatialNavigationManager.prototype._managedController is the object you need to work with and most probably TKSpatialNavigationManager.prototype._managedController.keyWasPressed(key) is the code that captures the escape key. Take a look through the code for addEventListener("keypress",SOME_METHOD,true) (or keyup or keydown) and it will be the SOME_METHOD that's handling the event. That's the method you'll want to hijack. Hopefully it will be in a scope you can easily get to.