Elaborating on my comment above, I guess the following should work.
To show the principle I omitted formatting, so element (id="spacer") color may needed to be set to #FFFFFE, maybe some pixels of leading space added etc ... but the carret will move proportionally now - provided that id's test and spacer use the same font.
Of course we don't know the distance in [px] as asked, but we are able to position content (a carret in this case) fully in line with the width of a proportional font, so if that's the ultimate goal (like mentioned in OP line 3), then .... voi lá!
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function adjust()
{
document.getElementById('spacer').innerHTML=document.getElementById('test').value;
}
</script>
<p>
<input name="test" id="test" type="text" onkeyup="adjust()" /> Test <br />
<span id="spacer"></span>^here
</p>
</body>
</html>
Update:
<span id="spacer" style="color: #FFFFFF"></span>
this will make the spacer invisible on a white background, but does not yet prevent the user from highlighting the spacer text by selecting the span element. Leaves the task of making the spacer unselectable - there's a good solution here
