practice

　　　　

<html>
<meta charset="utf-8">

<style>
body{color:#333333;
margin:0 auto;}
.コンテンツ{padding: 5px 5px 5px 7px;}
.テーブルサイズ{margin-left:15px;}
.テーブルサイズ{margin-left:0;}
.テーブルセット{font-family:sans-serif;
background-color:#ffffff;
border-collapse:collapse;
color:#456789;
margin-top:5px;
margin-bottom:80px;}
.テーブルセット th{text-align:center;
border:1px #456789 solid;
padding:4px 4px;
background-color:#f0f0f0;
font-size:9pt;}
.テーブルセット td{border:1px #999999 solid;
padding:6px;
letter-spacing:1px;
font-size:14px;}
.ヨコサイズ table{width:100%;
margin-bottom:5px;}
#レイアウト input[type="button"]
{padding:10px 30px 10px 30px;
font-size:12pt;
font-weight:bold;
cursor:pointer;}
.リザルト{font-size:14px;
font-weight:bold;
padding:5px;
color:black;
text-align:center;}
</style>

<script>
function きーのだうん(evt)
{document.getElementById("だうん変換").innerHTML="";
document.getElementById("だうん名前").innerHTML="";
document.getElementById("だうんしふと").innerHTML="";
document.getElementById("だうんこんとろーる").innerHTML="";
document.getElementById("だうんおぷしょん").innerHTML="";
document.getElementById("ぷれす変換").innerHTML="";
document.getElementById("ぷれす名前").innerHTML="";
document.getElementById("ぷれすしふと").innerHTML="";
document.getElementById("ぷれすこんとろーる").innerHTML="";
document.getElementById("ぷれすおぷしょん").innerHTML="";
document.getElementById("あっぷ変換").innerHTML="";
document.getElementById("あっぷ名前").innerHTML="";
document.getElementById("あっぷしふと").innerHTML="";
document.getElementById("あっぷこんとろーる").innerHTML="";
document.getElementById("あっぷおぷしょん").innerHTML="";
if(document.getElementById("入力").value.length==50)
{alert("");
document.getElementById("入力").value="";
return(false);}
let きーこーど=evt.which;
if(きーねーむ[きーこーど])
{document.getElementById("だうん名前").innerHTML=きーねーむ[きーこーど];}
else{document.getElementById("だうん名前").innerHTML=String.fromCharCode(きーこーど);}
document.getElementById("だうん変換").innerHTML=evt.which;
document.getElementById("だうんしふと").innerHTML=evt.shiftKey;
document.getElementById("だうんこんとろーる").innerHTML=evt.ctrlKey;
document.getElementById("だうんおぷしょん").innerHTML=evt.altKey;}
function きーのぷれす(evt)
{let きーこーど=evt.which;
if(ぷれす[きーこーど])
{document.getElementById("ぷれす名前").innerHTML=ぷれす[きーこーど];}
else{document.getElementById("ぷれす名前").innerHTML=String.fromCharCode(きーこーど);}
document.getElementById("ぷれす変換").innerHTML=evt.which;
document.getElementById("ぷれすしふと").innerHTML=evt.shiftKey;
document.getElementById("ぷれすこんとろーる").innerHTML=evt.ctrlKey;
document.getElementById("ぷれすおぷしょん").innerHTML=evt.altKey;}
function きーのあっぷ(evt)
{let きーこーど=evt.which;
if(きーねーむ[きーこーど])
{document.getElementById("あっぷ名前").innerHTML = きーねーむ[きーこーど];}
else{document.getElementById("あっぷ名前").innerHTML=String.fromCharCode(きーこーど);}
document.getElementById("あっぷ変換").innerHTML=evt.which;
document.getElementById("あっぷしふと").innerHTML=evt.shiftKey;
document.getElementById("あっぷこんとろーる").innerHTML=evt.ctrlKey;
document.getElementById("あっぷおぷしょん").innerHTML=evt.altKey;}
let きーねーむ={};
きーねーむ['0']='英数';
きーねーむ['8']='backspace';
きーねーむ['9']='tab';
きーねーむ['12']='clear';
きーねーむ['13']='enter';
きーねーむ['16']='shift';
きーねーむ['17']='control';
きーねーむ['18']='option(alt)';
きーねーむ['19']='pausebreak';
きーねーむ['20']='caps lock';
きーねーむ['27']='esc';
きーねーむ['32']='space';
きーねーむ['33']='pageup';
きーねーむ['34']='pagedown';
きーねーむ['35']='end';
きーねーむ['36']='home';
きーねーむ['37']='←';
きーねーむ['38']='↑';
きーねーむ['39']='→';
きーねーむ['44']='↓';
きーねーむ['45']='insert';
きーねーむ['46']='delete';
きーねーむ['91']='⌘/Windows';
きーねーむ['93']='⌘/Windows';
きーねーむ['96']='0(テンキー0)';
きーねーむ['97']='1(テンキー1)';
きーねーむ['98']='2(テンキー2)';
きーねーむ['99']='3(テンキー3)';
きーねーむ['100']='4(テンキー4)';
きーねーむ['101']='5(テンキー5)';
きーねーむ['102']='6(テンキー6)';
きーねーむ['103']='7(テンキー7)';
きーねーむ['104']='8(テンキー8)';
きーねーむ['105']='9(テンキー9)';
きーねーむ['106']='*(テンキー*)';
きーねーむ['107']='+(テンキー+)';
きーねーむ['109']='-(テンキー-)';
きーねーむ['110']='.(テンキー.)';
きーねーむ['111']='/(テンキー/)';
きーねーむ['144']='numlock';
きーねーむ['145']='scrolllock';
きーねーむ['112']='F1';
きーねーむ['113']='F2';
きーねーむ['114']='F3';
きーねーむ['115']='F4';
きーねーむ['116']='F5';
きーねーむ['117']='F6';
きーねーむ['118']='F7';
きーねーむ['119']='F8';
きーねーむ['120']='F9';
きーねーむ['121']='F10';
きーねーむ['122']='F11';
きーねーむ['123']='F12';
きーねーむ['124']='F13';
きーねーむ['125']='F14';
きーねーむ['126']='F15';
きーねーむ['127']='F16';
きーねーむ['128']='F17';
きーねーむ['129']='F18';
きーねーむ['130']='F19';
きーねーむ['186']='* or :';
きーねーむ['187']='+ or ;';
きーねーむ['188']='< or ,';
きーねーむ['189']='= or -';
きーねーむ['190']='> or .';
きーねーむ['191']='? or /';
きーねーむ['192']='* or :';
きーねーむ['219']='{ or [';
きーねーむ['220']='| or \\';
きーねーむ['221']='} or ]';
きーねーむ['222']='~ or ^';
きーねーむ['226']='_ or \\';
let ぷれす={};
ぷれす['13']='enter';
ぷれす['27']='esc';
ぷれす['32']='space';
ぷれす['38']='&';
</script>

<div id="入力サンプル">
<div class="コンテンツ">
<div class="ヨコサイズ">
<p>
<input size="60"id="入力"type="text"maxlength="50"class="txt"placeholder="カーソル 入力"onkeydown="きーのだうん(event)"onkeypress="きーのぷれす(event)"onkeyup="きーのあっぷ(event)"style="font-size:20px;">　<input type="button"onclick="window.location.reload();"value="リロード"style="font-size:14px;color:red;font-weight:bold;">
</p>
</div>

<h1 style="font-size:14px;">取得した結果を表示</h1>
<div id="レイアウト">
<div class="ヨコサイズ">
<table class="テーブルセット テーブルサイズ">
<tbody>
<tr>
<th>event の種類</th><th>番号</th><th>名前</th><th>shift</th><th>ctrl</th><th>option(alt)</th>
</tr>
<tr>
<th>onkeydown の結果</th>
<td id="だうん変換"class="リザルト"></td>
<td id="だうん名前"class="リザルト"></td>
<td id="だうんしふと"class="リザルト"></td>
<td id="だうんこんとろーる"class="リザルト"></td>
<td id="だうんおぷしょん"class="リザルト"></td>
</tr>
<tr>
<th>onkeypress の結果</th>
<td id="ぷれす変換"class="リザルト"></td>
<td id="ぷれす名前"class="リザルト"></td>
<td id="ぷれすしふと"class="リザルト"></td>
<td id="ぷれすこんとろーる"class="リザルト"></td>
<td id="ぷれすおぷしょん"class="リザルト"></td>
</tr>
<tr>
<th>onkeyup の結果</th>
<td id="あっぷ変換"class="リザルト"></td>
<td id="あっぷ名前"class="リザルト"></td>
<td id="あっぷしふと"class="リザルト"></td>
<td id="あっぷこんとろーる"class="リザルト"></td>
<td id="あっぷおぷしょん"class="リザルト"></td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</div>

</html>