Firing keydown events from Keyboard

[Cypaubr]

Hello, is it possible to fire keydown events when clicking on inputs or using Navigation plugin in order to get keyCode? For all keys (maybe except for the Accept and Cancel keys).

[Mottie]

Hi @Cypaubr!

You can use the change callback to trigger a keydown event (demo):

$("#keyboard")
  .on("keydown", function(e) {
    if (e.action) {
      // updates with both virtual & physical keyboard
      // (but not on keydown)
      console.log(e.timeStamp, e.key);
    } else {
      // only physical keyboard used
    }
  })
  .keyboard({
    change: function(e, keyboard) {
      e.type = "keydown";
      e.key = keyboard.last.key;
      keyboard.$el.trigger(e);
    }
  });

Including the navigation extension won't change this behavior, unless you need to know the active key.

[Cypaubr]

Okay, I tested but it does not work when I click on the keyboard. And when I use the Navigation it prints my physical keyboard inputs not the virtual keyboard inputs.

[Mottie]

Did you try out at the demo? If it isn't behaving as you expect, please modify it to show the issue and I can try to help troubleshoot the problem.

[Mottie]

Oh, I see that the problem in the demo was that I was including the typing extension. It interferes, but shouldn't, with the navigation extension. Try this (demo):

$(function() {
  // change navigation toggle
  // (use Shift+F1 to prevent help page from opening)
  $.keyboard.navigationKeys.toggle = 112;

  var $ul = $("ul");
  $("#keyboard")
    .on("keyboardChange", function(e, keyboard) {
      if (keyboard.last.virtual) {
        // updates only with virtual keyboard use
        $ul.append("<li>" + e.timeStamp + ": " + e.action + "</li>");
        $ul.find("li:nth-child(1)").remove();
      } else {
        // updates with both virtual & physical keyboard
        // console.log(e.action)
      }
    })
    .keyboard({
      usePreview: false
    })
    .addNavigation({
      // set start position [row-number, key-index]
      position: [0, 0],
      // selected key wraps from the end of the row to the beginning, and vice versa
      rowLooping: false,
      // true = navigate the virtual keyboard, false = navigate in input/textarea
      toggleMode: true,
      // css class added to the keyboard when toggle mode is on
      focusClass: "hasFocus"
    });
});

Hopefully, you're not stuck with using only keydown since keyboardChange is a much better option.