JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<h1>Put Cursor at End of Input</h1>

<input type="search" value="Potato Pancakes" id="search">

CSS

body {
  padding: 10px;
}

JavaScript

var range, selection, star, end, selectedText, startNode, endNode, containerId ="editableDiv";
function getCaretPos(){
	range= window.getSelection().getRangeAt(0);
	start = range.startOffset;
	end = range.endOffset;
	startNode = range.startContainer;
	endNode = range.endContainer;
	selectedText = range.toString();
//	alert('start: '+start+'\

 end: '+ end+'

 text: '+selectedText +'

 startnode: '+$(startNode.parentNode).index()+'

 endnode: '+$(endNode.parentNode).index() );
}
function restoreCaretPos(){
	selection = window.getSelection();
	if (selection.rangeCount > 0) {
		selection.removeAllRanges();
		selection.addRange(range);
	}
}
function setCaretPos(startNodeIndex, endNodeIndex, start, end){
	range = document.createRange();
	var editableContainer = document.getElementById(containerId);
	range.setStart(editableContainer.childNodes[startNodeIndex].firstChild,start);
	range.setEnd(editableContainer.childNodes[endNodeIndex].firstChild,end);
	var selection = window.getSelection();
	selection.addRange(range);
}