JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="txt">Lorem
ipsum</textarea>
<br/>
<input id="caretPos" type="text" value="0" />
<br/>
<button onclick="setCaretPosition()">
Set cursor
</button>
JavaScript
function getCaretPosition() {
var txt = document.getElementById("txt");
var startPos = txt.selectionStart;
var endPos = txt.selectionEnd;
return endPos;
}
function setCaretPosition() {
alert(getCaretPosition());
var txt = document.getElementById("txt");
var caretPos = parseInt(document.getElementById("caretPos").value);
if(txt.createTextRange) {
var range = txt.createTextRange();
range.collapse(true);
range.moveEnd('character', caretPos);
range.moveStart('character', caretPos);
range.select();
return;
}
if(txt.selectionStart) {
txt.focus();
txt.setSelectionRange(caretPos, caretPos);
}
}