JSFiddle - React, Tailwind, and code Playground

by Hellfrom

HTML

<input type="text" id='input' value='0123456789'/>
  
  <button type='button' id='btn'>btn</button>

JavaScript

function doGetCaretPosition (ctrl) {
 
	var CaretPos = 0;
	// IE Support
	if (document.selection) {
 
		ctrl.focus ();
		var Sel = document.selection.createRange ();
 
		Sel.moveStart ('character', -ctrl.value.length);
 
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
 
	return (CaretPos);
 
}
 
 
function setCaretPosition(ctrl, pos)
{
 
	if(ctrl.setSelectionRange)
	{
		ctrl.focus();
		ctrl.setSelectionRange(pos,pos);
	}
	else if (ctrl.createTextRange) {
		var range = ctrl.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}

var input = document.getElementById('input');
var btn = document.getElementById('btn').addEventListener('click',function (){
    input.focus();
    setCaretPosition(input, 2);
    console.log('caret at:' + doGetCaretPosition(input));
});