JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div id="apple" class='fff' contenteditable="true">Hello you out there</div>
<div id="banana" contenteditable="true"></div>

<button>ffff</button>

CSS

div[contenteditable=true] {
    padding:10px;
    margin:20px;
    width:300px;
    height: 70px;
    border: 1px groove #ccc;
}
.here {
    margin-top: 20px;
}
span {
    color: red;
}
}

JavaScript

$('.fff').keydown(function (e) {

    if (e.which == 70) {
        e.preventDefault();
        txt = $('#apple').text();
        
        sel = window.getSelection();
        range = sel.getRangeAt(0);
        
        caretPos = range.endOffset;
        rangeLength = range.toString().length;
        caretStart = caretPos - rangeLength;
        
        type = caretStart == caretPos ? 'single' : 'range';
        
        if (type === 'single') {
            before = txt.substring(0,caretPos);
            after = txt.slice(caretPos);
        }
        else if (type === 'range') {
            before = txt.substring(0,caretStart);
            after = txt.slice(caretPos);            
        }

        all = before + '*****' + after
        
        $('#banana').text(all);
        
        $('#banana').removeAttr('contenteditable');
        $('#banana').attr('contenteditable','true');
        $('#banana').focus();
    }
});

$('button').click(function() {
    console.log('b');
    $('#banana').click(); 
});