JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<div id="fack-input">
    <div id="content"></div>
    <div id="fake-cursor" class="blink"></div>
</div>

CSS

#fack-input {
    background: #ccc;
    width: 120px;
    height: 25px;
    padding: 4px;
    cursor: text;
}

#fake-cursor {
    background: #333;
    width: 1px;
    height: 23px;
}

#fake-cursor, #content {
    display: inline-block;    
}

#content {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
}

.blink {
    animation: blink 1s steps(5, start) infinite;
    -webkit-animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden;
    }
}

JavaScript

$(function () {
    var $content = $("#content");
    
    $(document).keypress(function (event) {
        if(event.keyCode == 8) {
            $content.text($content.text().slice(0, -1))
            event.stopPropagation();
        } else {
            $content.text($content.text() +  String.fromCharCode(event.which));        
        }
    });
});