JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<input type="text">

CSS

.fl-l {
    float: left;
}

JavaScript

(function () {
    console.clear();
    var caret = document.createElement('span');
    var input = document.createElement('div');
    var fput = document.createElement('div');
    var caretLeftElement, caretLeft = 1;
    input.addEventListener('keydown', function (e) {
        var r = 1,
            text, el;
        if (e.which === 8) {
            if (fput.firstChild) {
                console.log(caretLeftElement.isSameNode(fput.lastChild));
                if (caretLeftElement.isSameNode(fput.lastChild)) {
                    caretLeft = fput.firstChild ? (caretLeft - (caretLeftElement.offsetWidth)) : 1;
                    fput.removeChild(fput.lastChild);
                    caretLeftElement = fput.lastChild;
                    caret.style.left = caretLeft + 'px';
                } else {
                    caretLeft -= caretLeftElement.offsetWidth;
                    el = caretLeftElement.previousElementSibling;
                    console.log(el);
                    fput.removeChild(caretLeftElement);
                    caretLeftElement = el;
                    caret.style.left = caretLeft + 'px';
                }
            }
            e.preventDefault();
        } else if (e.which === 46) {
            if (!caretLeftElement && fput.firstChild) {
                caretLeftElement = false;
                fput.removeChild(fput.firstChild);
            } else if (caretLeftElement && caretLeftElement.nextElementSibling) {
                el = caretLeftElement.nextElementSibling;
                fput.removeChild(el);
            }
            e.preventDefault();
        } else if (e.which === 32) {
            el = document.createElement('span');
            el.innerHTML = '&nbsp;';
            el.className = 'fl-l';
            fput.appendChild(el);
            caretLeftElement = el;
            caretLeft += caretLeftElement.offsetWidth;
            caret.style.left = caretLeft + 'px';
            e.preventDefault();
        } else if (e.which ===...