JSFiddle - React, Tailwind, and code Playground

HTML

<p>click just right of the letter c, then just left of the letter c, note the position doesn't change</p>
<input value = "abc def"><br>
    <div>caret position: <span></span></div>

JavaScript

$('input').click(function(){
var Sel = document.selection.createRange();
     Sel.moveStart('character', -this.value.length);
     CaretPos = Sel.text.length;
$('span').text(CaretPos);
});