mzechmeister/pseudo_editable_field.html

## demo.html
<!DOCTYPE html>
<html>
<head>
<style>
#cursor {
    border-left: 1px solid red;
    animation: blink 1s;
    margin-left: -1px;
    animation-iteration-count: infinite;
}
span {
    color: green;
}

span:not(#cursor):before {
    content: "5";
    vertical-align: super;
    font-size: smaller;
}

@keyframes blink {
50% { border-color: #ffffff00; }  }}
</style>
</head>

<body>
<textarea id="ta" style="height:150px">The top element is a textarea and the div at the bottom a pseudo editable field. Type to see how the caret follows. Type a dollar character to insert a span. Mouse click in the editable field doen't set the caret properly.</textarea>
<div id="mydiv" onclick="ta.selectionEnd = getSelectionPosition(); ta.selectionStart = ta.selectionEnd; ta.focus(); update()"></div>

<script>
function getSelectionPosition() {
    var sel = window.getSelection()
    console.log(sel)
    return sel.focusOffset
}

function parse(t) {
    return t.replaceAll('$', '<span>XX</span>')
}

function update() {
   curpos = ta.selectionEnd
   mydiv.innerHTML = parse(ta.value.slice(0, curpos)+"<span id='cursor'></span>"+ta.value.slice(curpos))
}

ta.onkeydown = update
ta.oninput = update
ta.onclick = update
ta.onkeyup = update

update()
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#cursor {
	border-left: 1px solid red;
	animation: blink 1s;
	margin-left: -1px;
	animation-iteration-count: infinite;
	}
	span {
	color: green;
	}

	span:not(#cursor):before {
	content: "5";
	vertical-align: super;
	font-size: smaller;
	}

	@keyframes blink {
	50% { border-color: #ffffff00; } }}
	</style>
	</head>

	<body>
	<textarea id="ta" style="height:150px">The top element is a textarea and the div at the bottom a pseudo editable field. Type to see how the caret follows. Type a dollar character to insert a span. Mouse click in the editable field doen't set the caret properly.</textarea>
	<div id="mydiv" onclick="ta.selectionEnd = getSelectionPosition(); ta.selectionStart = ta.selectionEnd; ta.focus(); update()"></div>

	<script>
	function getSelectionPosition() {
	var sel = window.getSelection()
	console.log(sel)
	return sel.focusOffset
	}

	function parse(t) {
	return t.replaceAll('$', '<span>XX</span>')
	}

	function update() {
	curpos = ta.selectionEnd
	mydiv.innerHTML = parse(ta.value.slice(0, curpos)+"<span id='cursor'></span>"+ta.value.slice(curpos))
	}

	ta.onkeydown = update
	ta.oninput = update
	ta.onclick = update
	ta.onkeyup = update

	update()
	</script>

	</body>
	</html>