JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

<input type=button id="Record" value="Record"/>
<input type=button id="Stop" value="Stop"/>
<input type=button id="Replay" value="Replay" />
<input type=button id="Undo" value="Undo" />
<input type=button id="Edit" value="Edit" />
<p>Test</p>
<input type="text" name="i1"/>
<div id=inner>
<textarea id="content" rows="4" cols="50" class=test></textarea>
</div>

JavaScript

//console.log(new Date(1440757213295));

/*
 * return all evt available starting wit on
 * ex: onclick
 */
function getAllEvents(element) {
    var $el= (element instanceof jQuery) ? element : $(element);
    var result = [];
    for (var key in $el[0]) {
        if (key.indexOf('on') === 0) {
            result.push(key.slice(2));
        }
    }
    return result.join(' ');
}
/*
 * return a copy of an object with only non-object keys
 * we need this to avoid circular references
 */
function simpleKeys (original) {
  return Object.keys(original).reduce(function (obj, key) {
    obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
    return obj;
  }, {});
}

/*****/
var startRecord=false;


/****/
var evts="click change submit";//"*"
//console.log(evts);

var records=[],records2={};

var el = $('*');
var allEvtStr= evts=="*" ? getAllEvents(el) : evts;
 var evt1=el.bind(
     allEvtStr
     , {
        // Store the current value on focus and on change
        test:1,previous:this.value
    }
    , function(e) {
        if(!startRecord) return;
    //if(e.type.indexOf("mouse")==0) return;
     var $t=$(this);
    //console.log(e.type);
    //console.log("e",JSON.stringify(simpleKeys(e)));
    //console.log("t",JSON.stringify($(this)));
     /*console.log(
         $t.get(0).tagName
         ,$t.attr("id")
         ,$t.attr("class")
         ,$t.val()
         ,e.data
     );*/
        
     // fill json events list
     if($t.get(0).tagName!="HTML"){
         if(!records2[e.timeStamp]) records2[e.timeStamp]=[]
         records2[e.timeStamp].push({
             ev:e.type
             ,tag:$t.get(0).tagName	
             ,id:$t.attr("id")
             ,val:$t.val()
             ,key:e.KeyCode
             ,type:$t.attr("type")
             ,name:$t.attr("name")
             ,pos:$t.position()
         });
         records.push({ev:e.type,key:e.KeyCode});
     }
     //$('*').trigger({});
});

$('input[value="Edit"]').click(function(){
  ...