mzechmeister

mzechmeister / gist:847937454ac40207e051847668e8bcec

Created October 18, 2021 15:39

caret behaviour in contenteditable

	<!DOCTYPE html>
	<html>
	<style>
	div {background-color: #dfd}
	span {background-color: #fbb}
	</style>

	<body>
	The checking the caret behaviour in <code>contenteditable</code>. The caret is placed with an offset of 1 and then moved backwards. It is checked whether the caret is still in the current sibling (return value 0) or has entered the previous sibling (return value 5).

mzechmeister / contenteditable_zwsp.html

Last active October 10, 2021 00:58

contenteditable with zwsp simple

	<!DOCTYPE html>
	<html>
	<style>
	div {background-color: #dfd}
	span {background-color: #fbb}
	span:nth-child(even) {background-color: #ccf}
	input {width:90%; font-size: 11px}
	#editable:focus-within, .active {outline: 5px auto Highlight;
	outline: 5px auto -webkit-focus-ring-color;
	}

mzechmeister / caret.html

Created October 7, 2021 13:08

handling caret contenteditable

	<!DOCTYPE html>
	<html>
	<style>
	div {background-color: #dfd; width:300px;}
	span {background-color: #fbb;}
	span:nth-child(even) {background-color: #ccf;}
	input {width:90%; font-size: 11px;}
	</style>
	<body>
	Works good with firefox. Android chrome has another behaviour.

mzechmeister / focus_nested.html

Last active April 22, 2025 11:54

focus nested editable elements

mzechmeister / autosuggest.html

Last active October 3, 2021 06:46

autosuggest for contentEditable