mzechmeister/pseudo_editable_field.html

## pseudo_editable_field.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. As before, click sets the caret properly (curpos computed with node loop; would allow to corrected of string length changes by parser). Still, text selection are now deleted. Since the parse changes the string length at dollar this needs to be taken into account.</textarea>
<div id="mydiv" onclick="ta.selectionEnd = getSelectionPosition(); ta.selectionStart = ta.selectionEnd; ta.focus(); update()"></div>

<script>
function getSelectionPosition() {
    var sel = window.getSelection()
    var node = sel.focusNode
    var pos = sel.focusOffset
    while (node = node.previousSibling)
        pos += (node.nodeType == Node.TEXT_NODE ?  node : node.innerText).length
    return pos
}

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. As before, click sets the caret properly (curpos computed with node loop; would allow to corrected of string length changes by parser). Still, text selection are now deleted. Since the parse changes the string length at dollar this needs to be taken into account.</textarea>
	<div id="mydiv" onclick="ta.selectionEnd = getSelectionPosition(); ta.selectionStart = ta.selectionEnd; ta.focus(); update()"></div>

	<script>
	function getSelectionPosition() {
	var sel = window.getSelection()
	var node = sel.focusNode
	var pos = sel.focusOffset
	while (node = node.previousSibling)
	pos += (node.nodeType == Node.TEXT_NODE ? node : node.innerText).length
	return pos
	}

	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>