JSFiddle - React, Tailwind, and code Playground

HTML

<textarea cols="10" rows="10" id="text"></textarea>
<img src="http://www.google.com/tia/tia.png" id="caret" />

CSS

#caret {
    display: block;
    float: left;
    position: absolute;
    width: 5px;
    height: 20px;
    left: 10px;
}

#text {
    display: block;
    float: left;
    font-size: 12px;
    font-family: "monospace";
}

JavaScript

$("#text").keydown(updateCaret);

var objLeft = 10;
var objTop = 10;
function updateCaret(event){
    var caret = $("#caret")[0];
    objLeft += checkEvent(event).left;
    objTop += checkEvent(event).top;
    caret.style.left = objLeft + "px";
    caret.style.top = objTop + "px";
    return true;
}


function checkEvent(event){
    var diff = {};
    var left = 7;
    var top = 0;
    
    console.log(event.which);
    switch(event.which) {
        case 37: left = -7; break; // left
        case 38: top = -15; left = 0; break; // top
        case 40: top = 15; left = 0; break; // down            
        case 8: left = -7; break; // backspace
        case 13: left = -objLeft + 10; top = 15; break; // enter
    }
            
    diff.left = left;
    diff.top = top;
    return diff;
}