JSFiddle - React, Tailwind, and code Playground

by microThread

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
Event:
<div id="event" style="border: 1px solid blue; min-height: 100px; "></div>

<br><br>

<textarea id="textarea" style="width: 400px; height: 200px;" data-time="0">

Hold shift key for 3 seconds in this textarea

</textarea>

JavaScript

var text_area 					= null;
var shift_key_press_duration 	= 3 * 1000; /* 5 seconds. */
var key_down 					= function(event) {

	if (event.keyCode == 16) {
		var d = new Date();

		if(text_area.attr( 'data-time') == 0) {
			text_area.attr( 'data-time', d.getTime() );
		}

		if( (d.getTime() - text_area.attr( 'data-time'))  >= shift_key_press_duration ) {
			$('#event').append( 'Event triggered at: ' + d  + "\n");
			
			alert('Bla');

			text_area.attr( 'data-time', '0');
		}
	}
	
};

var key_up 						= function(event) {
	text_area.attr( 'data-time', '0');
}


$(document).ready(function() {

	text_area = $('#textarea');
	

	text_area
		.on('keydown', key_down)
		.on('keyup', key_up);


});