JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input id="content" class="capture"/>

JavaScript

var Capture = function(config) {
    this.initialize(config);
};

Capture.prototype = {
    initialize: function(config) {
		console.log(config,'config')
        this.interactions = config.interactions || true,
            this.interactionElement = config.interactionElement || 'interaction',
            this.interactionEvents = config.interactionEvents || ['mouseup', 'touchend', 'blur' ,'keyup'],
            this.records = [];
        this.register();
    },
    register: function() {
        var Interaction = this;
        if (Interaction.interactions === true) {
            for (var i = 0; i < Interaction.interactionEvents.length; i++) {
                var ev = Interaction.interactionEvents[i],
                    targets = document.getElementsByClassName(Interaction.interactionElement);
                for (var j = 0; j < targets.length; j++) {
                    targets[j].addEventListener(ev, function(e) {
                        Interaction.track(e, "interaction");
                    });
                }
            }
        }

      //  window.onbeforeunload = function(e) {
       //     Interaction.post();
       // };
    },
    track: function(e, type) {
        var Interaction = this,
            interaction = {
                type: type,
                event: e.type,
                targetTag: e.target != undefined ? e.target.tagName : "",
                content: e.target != undefined ? e.target.value : ""
            };
        Interaction.records.push(interaction);
		console.log(Interaction,'this.interactions');
        return this.interactions;
    }
};



var Events = new Capture({
    interactions: true,
    interactionElement: "capture",
    interactionEvents: ["blur","keyup"],
});