JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<link rel="stylesheet" href="http://www.saddleback.edu/faculty/tdedonno/cimw260/samples/eventTableTwilight.css">
<table style="width:90%;" border="1">
              <tr>
               <th colspan="4">Keyboard events can be more complicated you are dealing with an EventObject</th>
  </tr> <tr>
               <td colspan="4"><p class="testArea" id="keyboard">Keyboard Test Area</p></td>
             </tr><tr>
               <td>element.<a href="http://api.jquery.com/keypress/">keydown</a></td>
               <td>Print out key that is being held down and set <a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_keydown_keyup">background to yellow.</a></td>
               <td>html</td>
               <td><label>Enter:</label><input type="text" name="testKeyDown" id="testKeyDown"></td>
             </tr><tr>
               <td>element.keyup</td>
               <td>Print out key that has just been released, and set background to blue.</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
             </tr><tr>
 </table>

CSS

@charset "utf-8";
/* CSS Document */
body {
	background-color: #415D7A;
}

table {
	color : #222222;
	width : 90%;
	margin : auto;
	background-color : #eeeeee;
}

tr:nth-child( even ) { background-color: rgba( 200, 200, 200, 100 ); }

table, td, tr {
	border : medium solid #CECECE;
}

JavaScript

$(document).ready( function( ) {
	
/** .testArea#keyboard  event handlers */	
	
	$("#testKeyDown").keydown(function(e) {
		//alert( "hello" );
		$( "#testKeyDown" ).css( "background-color", "yellow" );
		var k = e.charCode || e.which; // K will be a value from 0..256 ASCII
        $(".testArea#keyboard").html( "Holding key down: " + k );
    });
	
	
	/** .testArea#document element.keyup  */

	
} );//end of document.ready callback