JSFiddle - React, Tailwind, and code Playground

by siegesan

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
  width: 100%;
}
.print-output-line {
  white-space: pre;
  padding: 5px;
  font-family: monaco, monospace;
  font-size: .7em;
}

</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
  <fieldset>
    <label for="target">Type Something:</label>
    <input id="target" type="text" />
  </fieldset>
</form>
    <span id="txt">0</span>    
<button id="other">
  Trigger the handler
</button>


</body>
</html>

JavaScript

var xTriggered = 0;
var msg;

$(document).keydown(function(e){ 
alert(e.keyCode);        
    var x = $("#txt").text();
    if (e.keyCode >= 49 && e.keyCode <= 52)         
    {
        x = e.keyCode - 48;
    }
    else if (e.keyCode >= 97 && e.keyCode <= 100)         
    {
        x = e.keyCode - 96;
    }
    else if (e.keyCode == 38 || e.keyCode == 39) {
            x++;
    }
    else if (e.keyCode == 37 || e.keyCode == 40) {
            x= x-1;                 
    }
                 
    if (x>4) {
        x = 4;
    }
    if (x < 1) {
        x=1;
    } 
            
    $("#txt").text(x);
});



//$("#target").keypress(function(event) {
//   if ( event.which == 13 ) {
//     event.preventDefault();
//   }
     
//   alert(event.which); 
   //msg = "Handler for .keypress() called " + xTriggered + " time(s).";
  
//});

$("#other").click(function() {
   alert(msg);
});