JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<form name="testform">
<h2>Javascript Key Event Test Script</h2><p>
Type keys in the text area below to see the Javascript events triggered
and the values returned.
Notes on test results from the page are at
<a href="http://unixpapa.com/js/key.html">http://unixpapa.com/js/key.html</a>.
<p>
On most browsers, suppressing the default action on keypress events prevents
the browser from processing the keystroke. On some browsers, suppressing the
default action on keydown prevents keypress or keyup events from triggering.
Textinput events normally won't be seen unless you turn off default
suppression on keydown and keypress.
<p>
Your browser: <strong>
<script>
document.write(navigator.userAgent);
</script>
</strong>
<p>
<table>
<tr><td>Suppress default handling of:</td>
<td><input type="checkbox" name="keydown" value="1"> keydown
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="keypress" value="1" checked> keypress
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="keyup" value="1"> keyup
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="textinput" value="1"> textinput
</td></tr>
<tr><td>Show attribute values for:</td>
<td><input type="checkbox" name="classic" value="1" checked> classic
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="modifiers" value="1"> modifiers
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="dom3" value="1"> DOM 3
&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="olddom3" value="1"> old DOM 3
</td></tr>
</table>
<textarea name="t" rows="25" cols="90"></textarea>
<br>
<input type="reset" onclick="document.testform.t.value='';lines=0;return false">
</form>
<script language="JavaScript">
init();
</script>

JavaScript

<script language="JavaScript">

var lines= 0;
var maxlines= 24;

function init()
{
    document.testform.t.value+= '';
    lines= 0;

    if (document.addEventListener)
    {
       document.addEventListener("keydown",keydown,false);
       document.addEventListener("keypress",keypress,false);
       document.addEventListener("keyup",keyup,false);
       document.addEventListener("textInput",textinput,false);
    }
    else if (document.attachEvent)
    {
       document.attachEvent("onkeydown", keydown);
       document.attachEvent("onkeypress", keypress);
       document.attachEvent("onkeyup", keyup);
       document.attachEvent("ontextInput", textinput);
    }
    else
    {
       document.onkeydown= keydown;
       document.onkeypress= keypress;
       document.onkeyup= keyup;
       document.ontextinput= textinput;   // probably doesn't work
    }
}

function showmesg(t)
{
   var old= document.testform.t.value;
   if (lines >= maxlines)
   {
       var i= old.indexOf('\n');
    if (i >= 0)
        old= old.substr(i+1);
   }
   else
       lines++;

   document.testform.t.value= old + t + '\n';
}

function keyval(n)
{
    if (n == null) return 'undefined';
    var s= pad(3,n);
    if (n >= 32 && n < 127) s+= ' (' + String.fromCharCode(n) + ')';
    while (s.length < 9) s+= ' ';
    return s;
}

function keymesg(w,e)
{
    var row= 0;
    var head= [w, '        '];
    if (document.testform.classic.checked)
    {
    showmesg(head[row] +
            ' keyCode=' + keyval(e.keyCode) +
        ' which=' + keyval(e.which) +
            ' charCode=' + keyval(e.charCode));
    row= 1;
    }
    if (document.testform.modifiers.checked)
    {
    showmesg(head[row] +
            ' shiftKey='+pad(5,e.shiftKey) +
        ' ctrlKey='+pad(5,e.ctrlKey) +
        ' altKey='+pad(5,e.altKey) +
        ' metaKey='+pad(5,e.metaKey));
    row= 1;
    }
    if (document.testform.dom3.checked)
    {
    showmesg(head[row] +
        ' key='+e.key +
        ' char='+e.char +
      ...