Properties of native DOM events

[timathom]

I am working on a data entry form for library staff and would like to add keyboard shortcuts. I would like to be able to detect specific key codes in order to change the form view (previous or next) or trigger submissions, etc.

Desired markup:

<fx-fore>
  <fx-model>
    <fx-action event="keydown" target="#document">
      <fx-action if="event('code') = 'ArrowLeft'">
        <fx-message>Left!</fx-message>
      </fx-action>
      <fx-action if="event('code') = 'ArrowRight'">
        <fx-message>Right!</fx-message>
      </fx-action>
    </fx-action>
  </fx-model>
</fx-fore>

[timathom]

So, with JQuery and my minimal knowledge of JS, the following seems to serve as a workaround:

<fx-fore>
  <fx-model>
    <fx-action event="left" target="#document">
      <fx-message>Left!</fx-message>
    </fx-action>
    <fx-action event="right" target="#document">
      <fx-message>Right!</fx-message>
    </fx-action>
  </fx-model>
</fx-fore>

<script type="text/javascript">
  $(document).keydown(function (e) {
    switch (e.which) {

      case 37: // ArrowLeft

      e.target.dispatchEvent(
      new CustomEvent('left', {
        composed: true,
        bubbles: true
      }),);
      
      break;
      
      case 39: // ArrowRight
      
      e.target.dispatchEvent(
      new CustomEvent('right', {
        composed: true,
        bubbles: true
      }),);
      
      break;
      
      default: return; // exit this handler for other keys
    }
    
    e.preventDefault();
    // prevent the default action (scroll / move caret)
  });
</script>

[JoernT]

This makes a good feature request - will transfer to tickets

[JoernT]

creative workaround - however makes sense to expose at least the keycode via event() function to make it available for actions.

[JoernT]

I've just pushed the necessary changes to dev branch and there's new demo for it which essentially is the same as yours.

[timathom]

Great, thank you!