92 lines
3.8 KiB
HTML
92 lines
3.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" class="light-theme">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>JavaScript Event KeyCodes</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="twitter:title" content="JavaScript Event KeyCodes">
|
||
|
|
<meta name="twitter:description" content="Keycode testing tool - which keys map to which keycodes?">
|
||
|
|
<meta name="twitter:creator" content="@wesbos">
|
||
|
|
<meta name="twitter:image" content="https://cdn1.imggmi.com/uploads/2019/7/12/f6b03f5628f7850649714200ab517a52-full.png">
|
||
|
|
<link rel="stylesheet" href="style.css?v=07232021">
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" />
|
||
|
|
<link rel="icon" href="">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<script async src="//cdn.carbonads.com/carbon.js?serve=CESIK23L&placement=keycodeinfo" id="_carbonads_js"></script>
|
||
|
|
<canvas width="128" height="128" hidden></canvas>
|
||
|
|
<div class="display">
|
||
|
|
<table class="table hide">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Key Code</th>
|
||
|
|
<th>Key</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="table-body">
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="wrap" aria-live="polite" aria-atomic="true">
|
||
|
|
<p class="keycode-display"></p>
|
||
|
|
<p class="text-display">Press any key to get the JavaScript event keycode</p>
|
||
|
|
<div class="cards hide">
|
||
|
|
<div class="card item-key">
|
||
|
|
<div class="card-header">event.key</div>
|
||
|
|
<div class="card-main">
|
||
|
|
<div class="main-description">key</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card item-location">
|
||
|
|
<div class="card-header">event.location
|
||
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener"
|
||
|
|
class="more-info"></a>
|
||
|
|
</div>
|
||
|
|
<div class="card-main">
|
||
|
|
<div class="main-description">location</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card item-which">
|
||
|
|
<div class="card-header">
|
||
|
|
event.which
|
||
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noopener"
|
||
|
|
class="deprecated-link">(deprecated)</a>
|
||
|
|
</div>
|
||
|
|
<div class="card-main">
|
||
|
|
<div class="main-description">which</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card item-code">
|
||
|
|
<div class="card-header">event.code</div>
|
||
|
|
<div class="card-main">
|
||
|
|
<div class="main-description">code</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mobile-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fixed-buttons">
|
||
|
|
<button id="table-button" onclick={toggleTable()} class="toggle-button">Table</button>
|
||
|
|
<button id="theme-button" onclick={toggleTheme()} class="toggle-button">Dark theme</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script type='text/javascript'>
|
||
|
|
if ('serviceWorker' in navigator) {
|
||
|
|
navigator.serviceWorker.register('./service-worker.js');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
|
||
|
|
<script src="scripts.js?v=07232021"></script>
|
||
|
|
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
|
||
|
|
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b45decb6c8304abfaafe7d19167b59b5"}'></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|