JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app>
  the modifier as event (press <b>enter+ctrl+shift</b> or <b>toggle focus</b> to apply value): <br/>
  <input @mykeydown="value=$event.target.value" type="text" /> {{value}}
  
  <hr/>
  the modifier as modifier of event keydown (press <b>enter+ctrl+shift</b> to apply value): <br/>
  <input @keydown.mykeydown="value2=$event.target.value" type="text" /> {{value2}}
</div>

TypeScript

alight.hooks.eventModifier['mykeydown'] = {
  event: ['keydown', 'blur'],
  fn: (event, env) => {
    if(event.type == 'blur') return;
    env.stop = !(event.keyCode==13 && event.shiftKey && event.ctrlKey)
  }
}