JSFiddle - React, Tailwind, and code Playground

by dan_barzilay

HTML

<textarea id="txtArea" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
<button onclick="Backspace();">Backspace</button>

JavaScript

function getCaret(el) {
    if (el.selectionStart) {
        return el.selectionStart;
    } else if (document.selection) {
        el.focus();

        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }

        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);

        return rc.text.length;
    }
    return 0;
}

function resetCursor(txtElement, currentPos) { 
    if (txtElement.setSelectionRange) { 
        txtElement.focus(); 
        txtElement.setSelectionRange(currentPos, currentPos); 
    } else if (txtElement.createTextRange) { 
        var range = txtElement.createTextRange();  
        range.moveStart('character', currentPos); 
        range.select(); 
    } 
}

function Backspace() {
    var textarea = document.getElementById('txtArea');
    var currentPos = getCaret(textarea);    
    var text = $(textarea).text();

    var backSpace = text.substr(0, currentPos-1) + text.substr(currentPos, text.length);

    $(textarea).text(backSpace);
    
    resetCursor(textarea, currentPos-1);
}