JSFiddle - React, Tailwind, and code Playground

by Isaac Nygaard

HTML

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf8">
	<title>Live type test</title>
</head>
<body>
	<div id="source" contenteditable="true"></div>
	<div id="target"></div>
</body>
</html>

CSS

body{
	display:flex;
	flex-direction:column;
	align-items:center;
}
body>div{
	width:400px;
	border:1px solid black;
	border-radius:6px;
	margin-bottom:30px;
	padding:10px;
	outline:none !important;
	font-size:1em;
	min-height:1em;
}

JavaScript

document.addEventListener("DOMContentLoaded", (e) => {
console.log("working?")
	const src = document.getElementById("source");
	const target = document.getElementById("target");

	src.addEventListener("input", (e) => {
		if (e.isComposing) return;
		console.log("input", e.inputType);
	});
	src.addEventListener("beforeinput", (e) => {
		console.log(e);
	});
	src.addEventListener("compositionstart", (e) => {
		console.log("composing: start", e.data);
	});
	src.addEventListener("compositionupdate", (e) => {
		console.log("composing: update", e.data);
	});
	src.addEventListener("compositionend", (e) => {
		console.log("composing: end", e.data);
	});
});