JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<div id="result" contenteditable="true">Press left button on the text more than once. It is going to initial position of the div. </div>

CSS

#result {
    padding:0;
    margin:0;
    overflow: auto;
    width:300px;
    height: 200px;
    border: 1px groove black;
}

JavaScript

var _result = $('#result');
var _spanElem = "<span class='spanPos'></span>";
var code = {BS : 8, ENTER: 13, SPACE : 32, LEFT:37, UP : 38, RIGHT: 39, DOWN : 40, DELETE: 46, DOT: 190};
var _fullText;
var _selectedText;
var _caretPos;
var _thisResult;
_result.keydown(function (event) {
    _thisResult = this;
    var keyCode = event.which;
    if (keyCode == code.LEFT) {
            setValues(-1);
            setAutoCompletePos();
    }
    //Right
    else if (keyCode == code.RIGHT) {
            setValues(1);
            setAutoCompletePos();
    }
});

function setAutoCompletePos() {
    var offsetPos;
    _result.remove('.spanPos');
    var text = _fullText.slice(0, _caretPos) + _spanElem + _fullText.slice(_caretPos);
    _result.html(text);
    offsetPos = $('.spanPos').offset();
}

function setValues(val) {
    _fullText = _result.text();
    _caretPos = saveSelection(_thisResult).start;
    _selectedText = _fullText.substring(0, _caretPos + val);
}



//Function to get the caret positon in contenteditable div
//Link: http://stackoverflow.com/a/16253587
var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function (containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        }
    };

    restoreSelection = function (containerEl, savedSel) {
        var charIndex = 0,
            range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl],
            node, foundStart = false,
            stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if...