<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁監聽鍵盤輸入操作事件</title>
<style>
*{font-family:'Verdana','Microsoft Yahei';}
body {width: 100vw;height: 100vh;overflow:scroll;font-size:2vW;}
#keyin {color:red;height:100vh;line-height:150%;width:99vW;font-size:6vW;}
#keyin {overflow:auto;overflow-style:marquee,panner;}
span {color:blue;}
</style>
<script>
function $(Obj){
return document.getElementById(Obj);
}
window.addEventListener('keydown', function (e) {
var el = e.key; var eo = e.keyCode; var ec = e.code;
console.log(el + '=' + eo + '=' + ec);
if (el) {
if(el=="Enter"){
$('keyin').innerHTML += "<br><span>Enter</span>";
}else if(eo>90 && eo<94){
$('keyin').innerHTML += "<br><span>" + ec + "</span>";
}else if(eo>46 && eo<112){
$('keyin').innerHTML += e.key;
}else if(eo==32){
$('keyin').innerHTML += "<br><span>" + ec + "</span>";
}else{
$('keyin').innerHTML += "<br><span>" + el + "</span>";
}
}
});
</script>
</head>
<body>
<p>請鍵盤輸入</p>
可以監聽鍵盤操作除個別鍵比如POWER等功能鍵外，TAB鍵後重新點網頁回焦
<div id="keyin">
</div>
</body>
</html>
