显示按键码和键值

codekjy

于 2021-11-05 23:45:18 发布

阅读量228

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_47997447/article/details/121172867

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      background-color: #e1e1e1;
      font-family: sans-serif;
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
    }

    .key{
      border: 1px solid #999;
      background-color: #eee;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
      padding: 20px;
      font-size: 20px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      min-width: 150px;
    }
    .key small{
      font-size: 14px;
      color: #555;
    }

  </style>
</head>
<body>
<div id="insert">
  <div class="key">
    a
    <small>event.key</small>
  </div>
  <div class="key">
    65
    <small>
      event.keyword
    </small>
  </div>
  <div class="key">
    KeyA
    <small>
      event.Code
    </small>
  </div>
</div>
<script>
  const insert = document.getElementById('insert');
  window.addEventListener('keydown',(e)=> {
    insert.innerHTML = `<div class="key">
    ${event.key=== ''?'Space':event.key}
    <small>event.key</small>
    </div>
    <div class="key">
      ${event.keyCode}
      <small>event.keyCode</small>
    </div>
    <div class="key">
      ${event.code}
      <small>event.Code</small>
    </div>`;
  })
</script>
</body>
</html>

codekjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
显示按键码和键值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color...
复制链接

扫一扫