JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<input type="text">
<code><pre id="log"></pre></code>

JavaScript

// https://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript/34277417#34277417
console.clear();
function logCaps(e) {
  /* See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState
  This function is supported in Firefox & MS Edge, webkit browsers
  will be supported (soon) */
  var caps = e.getModifierState && e.getModifierState('CapsLock');
  $('#log').text("CAPS " + caps); // true when you press the keyboard CapsLock key
  //console.log(e);
}
document.addEventListener('keydown', logCaps);
document.addEventListener('click', logCaps);
document.addEventListener('mousemove', logCaps);
//document.addEventListener('DOMContentLoaded', logCaps);
//document.addEventListener('focus', logCaps);
/* $(function() {
  let test = logCaps;
  $('input').on('keydown click focus', function(e) {
    var event = e.originalEvent;
    test(event);
  });
});
 *///document.dispatchEvent(new KeyboardEvent('click', { 'key': 'Shift' } ));