JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<textarea style="width:100%;height:140px;">Boo</textarea>
<div class="output"></div>
<br />
<pre>
CTRL  : 17
L     : 76
SHIFT : 16 
ALT   : 18
</pre>

JavaScript

var CTRL_DOWN  = false;
var SHIFT_DOWN = false;

$(window).keydown(function(key) {

	// add_to_log(key.which);

	if (key.which == 17) {
  	CTRL_DOWN = true;
    // add_to_log('CTRL_DOWN set');
  } else if (key.which == 16) {
  	SHIFT_DOWN = true;
    // add_to_log('SHIFT_DOWN set');
  } else {
    if (CTRL_DOWN && SHIFT_DOWN) {
    	if (key.which == 76) {
      	$('textarea').css({'background':'green'});
      }
    }
  }
});

$(window).keyup(function(key) {
	if (key.which == 17) {
  	CTRL_DOWN = false;
    // add_to_log('CTRL_DOWN unset');
  } else if (key.which == 16) {
  	SHIFT_DOWN = false;
    // add_to_log('SHIFT_DOWN unset');
  }
});

function add_to_log(text) {
	$('.output').html($('.output').html()+text+"\n");
}