JSFiddle - React, Tailwind, and code Playground

by ocanal

HTML

<div id="textbox" contenteditable>
    
</div>

CSS

[contenteditable] {
    border: 1px solid gray;
}

.number {
  color: red;
}

JavaScript

var textBox = document.getElementById('textbox');

function insertTextAtCursor(text) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            textNode = document.createElement('span');
            textNode.classList.add('number');
            textNode.innerHTML = text; 
            range.insertNode(textNode);
            // Move caret to the end of the newly inserted text node
            range.setStart(textNode, textNode.innerHTML.length);
            range.setEnd(textNode, textNode.innerHTML.length);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(text);
    }
}

var div = document.getElementById("greek");

textBox.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which;
    var str = String.fromCharCode(charCode);
    if (charCode && /\d/.test(str)) {
        insertTextAtCursor(str);
        return false;
    }
}