JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="edit">Кликни на меня и <strong>посмотри где курсор</strong></div>

JavaScript

function createCaretPlacer(atStart) { // https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
    return function(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(atStart);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(atStart);
            textRange.select();
        }
    };
}

var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);

$('#edit')
	.click(function(e){
  		if ($(e.currentTarget).attr('contenteditable') === "true") return;
  		$(e.currentTarget).attr('contenteditable', 'true');
      placeCaretAtEnd(e.currentTarget);
  })
  .blur(function(e){
  	$(e.currentTarget).attr('contenteditable', 'false');
  })
;