nexpr/keyboard-lock-test.html

## keyboard-lock-test.html
<!doctype html>
<meta charset="utf-8" />

<script type="module">
	const addLog = (key) => {
		const div = document.createElement("div")
		div.textContent = `key: ${key}`
		setTimeout(() => {
			div.animate([
				{ height: div.clientHeight + "px" },
				{ height: "0" },
			], 300).finished.then(() => div.remove())
		}, 5000)
		log.prepend(div)
	}

	window.addEventListener("keydown", (event) => {
		event.preventDefault()
		console.log("key:", event.key)
		addLog(event.key)
	})

	fullscreen.onclick = async () => {
		if (document.fullscreenElement) {
			await document.exitFullscreen()
		} else {
			await document.documentElement.requestFullscreen()
		}
	}

	document.addEventListener("fullscreenchange", () => {
		if (document.fullscreenElement) {
			fullscreen.classList.add("on")
		} else {
			fullscreen.classList.remove("on")
		}
	})

	keyboardlock.onclick = async () => {
		if (keyboardlock.classList.contains("on")) {
			await navigator.keyboard.unlock()
			keyboardlock.classList.remove("on")
		} else {
			await navigator.keyboard.lock()
			keyboardlock.classList.add("on")
		}
	}
</script>

<style>
	body {
		width: 80%;
		margin: auto;
		display: flex;
		flex-flow: column;
		padding: 20px;
		gap: 20px;
	}

	button {
		padding: 10px;

		&.on {
			background: yellow;
		}
	}

	#notice {
		border: 1px dotted #5aa;
		background: #dff;
		padding: 10px;
	}

	#log > div {
		font-size: 11px;
		overflow: hidden;
	}
</style>

<button id="fullscreen">フルスクリーン</button>
<button id="keyboardlock">キーボードロック</button>

<div id="notice">キーボードロック時のフルスクリーンの解除は Escape キーの長押し</div>

<div id="log"></div>
	<!doctype html>
	<meta charset="utf-8" />

	<script type="module">
	const addLog = (key) => {
	const div = document.createElement("div")
	div.textContent = `key: ${key}`
	setTimeout(() => {
	div.animate([
	{ height: div.clientHeight + "px" },
	{ height: "0" },
	], 300).finished.then(() => div.remove())
	}, 5000)
	log.prepend(div)
	}

	window.addEventListener("keydown", (event) => {
	event.preventDefault()
	console.log("key:", event.key)
	addLog(event.key)
	})

	fullscreen.onclick = async () => {
	if (document.fullscreenElement) {
	await document.exitFullscreen()
	} else {
	await document.documentElement.requestFullscreen()
	}
	}

	document.addEventListener("fullscreenchange", () => {
	if (document.fullscreenElement) {
	fullscreen.classList.add("on")
	} else {
	fullscreen.classList.remove("on")
	}
	})

	keyboardlock.onclick = async () => {
	if (keyboardlock.classList.contains("on")) {
	await navigator.keyboard.unlock()
	keyboardlock.classList.remove("on")
	} else {
	await navigator.keyboard.lock()
	keyboardlock.classList.add("on")
	}
	}
	</script>

	<style>
	body {
	width: 80%;
	margin: auto;
	display: flex;
	flex-flow: column;
	padding: 20px;
	gap: 20px;
	}

	button {
	padding: 10px;

	&.on {
	background: yellow;
	}
	}

	#notice {
	border: 1px dotted #5aa;
	background: #dff;
	padding: 10px;
	}

	#log > div {
	font-size: 11px;
	overflow: hidden;
	}
	</style>

	<button id="fullscreen">フルスクリーン</button>
	<button id="keyboardlock">キーボードロック</button>

	<div id="notice">キーボードロック時のフルスクリーンの解除は Escape キーの長押し</div>

	<div id="log"></div>