JSFiddle - React, Tailwind, and code Playground

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 _savedSel; // added
	var _thisResult;

	_result.keyup(function (event) { // changed to keyup
		_thisResult = this;
		var keyCode = event.which;
		if (keyCode == code.LEFT) {
			setValues(-1);
			setAutoCompletePos();
		}
		//Right
		else if (keyCode == code.RIGHT) {
			setValues(1);
			setAutoCompletePos();
		}
	});

	//added
	_result.mouseup(function(event){
		_thisResult = this;
		_savedSel = saveSelection(_thisResult);
		_caretPos = _savedSel.start;
	});

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

	function setValues(val) {
		_fullText = _result.text();
		_savedSel = saveSelection(_thisResult);
		_caretPos = _savedSel.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 =...