JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<div id="hi" class="textval" contenteditable="true" placeholder="Текст" onkeypress="go()"></div>

CSS

html, body {
            min-height: 100px;
        }

        .textval {
            width: 200px;
            max-width: 100%;
            min-height: 1em;
            border: 1px solid #0c00ff;
            border-radius: 5px;
            font-family: sans-serif;
            line-height: 1.2;
            font-size: 1em;
            padding: .3em .5em;
        }

        [contenteditable]:empty:before {
            display: block;
            color: #999;
            content: attr(placeholder);
        }

JavaScript

function go(){
        if(document.getElementById("hi").innerHTML.length > 200){
            event.preventDefault();
        }
    }