模拟键盘

本文 ui 参考：

我代码有一个问题没有解决，等到js 代码的时候我会指出，国际惯例，先上效果图，我所实现的效果就是，键值 对应的 字母高亮。

 

 css+html：

    * {
      margin: 0;
      padding: 0;
      font-family: 'comic sans ms';
    }
    body {
      text-align: center;
    }
    button {
      width: 62px;
      height: 59px;
      background-color: white;
      font-size: 14px;
      text-align: center;
      border: 2px solid black;
      border-radius: 5px;
      margin: 2px;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
      cursor: pointer;
    }
    button:hover {
      box-shadow: 0px 4px 4px 4px rgba(79, 239, 239, 61),
        2px 4px 4px 0px rgba(0, 255, 255, 61);
      border: 1px solid black;
    }
    .buttonhighlight {
      box-shadow: 0px 4px 4px 4px rgba(79, 239, 239, 61),
        2px 4px 4px 0px rgba(0, 255, 255, 61);
      border: 1px solid black;
    }
    .f_div {
      position: relative;
      background-color: #cccccc;
      width: 1087px;
      height: 342px;
      margin: 100px 10%;
      border-radius: 10px;
      display: flex;
    }
    #s_div {
      position: absolute;
      top: 10px;
    }


 <div class="f_div">
      <div id="s_div">
        <!-- 第一排 -->
        <button>`</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>0</button>
        <button>-</button>
        <button>+</button>
        <button style="width: 134px;">backspace</button>
        <!-- 第二排 -->
        <button style="width: 98px;">tab</button>
        <button>q</button>
        <button>w</button>
        <button>e</button>
        <button>r</button>
        <button>t</button>
        <button>y</button>
        <button>u</button>
        <button>i</button>
        <button>o</button>
        <button>p</button>
        <button>[</button>
        <button>]</button>
        <button style="width: 98px;">\</button>
        <!-- 第三排 -->
        <button style="width: 134px;">capslock</button>
        <button>a</button>
        <button>s</button>
        <button>d</button>
        <button>f</button>
        <button>g</button>
        <button>h</button>
        <button>j</button>
        <button>k</button>
        <button>l</button>
        <button>;</button>
        <button>'</button>
        <button style="width: 134px;">enter</button>
        <!-- 第四排 -->
        <button style="width: 170px;">shift</button>
        <button>z</button>
        <button>x</button>
        <button>c</button>
        <button>v</button>
        <button>b</button>
        <button>n</button>
        <button>m</button>
        <button>,</button>
        <button>.</button>
        <button>/</button>
        <button style="width: 170px;">shift</button>
        <!-- 第五排 -->
        <button style="width: 98px;">control</button>
        <button>meta</button>
        <button>alt</button>
        <button style="width: 450px;" id="blank">span</button>
        <button>alt</button>
        <button>meta</button>
        <button style="width: 103px;">contextmenu</button>
        <button style="width: 98px;">control</button>
      </div>
    </div>

　js：

 <script>
      function keyboardhighlight() {
        let index = []
        let but = document.getelementsbytagname('button')
        let blank = document.getelementbyid('blank')
        document.onkeydown = function (event) {
          let e = event || window.event || arguments.callee.caller.arguments[0]
          //console.log(e.keycode)
          for (let i = 0; i < but.length; i++) {
            if (
              but[i].innertext.touppercase() === e.key.touppercase() &&
              e.keycode != 18 &&
              e.keycode != 17 &&
              e.keycode != 91
            ) {
              but[i].classlist.add('buttonhighlight')
              index[0] == i ? '' : index.push(i)
            }
          }
          if (e.keycode === 32) {
            blank.classlist.add('buttonhighlight')
            but[index[0]].classlist.remove('buttonhighlight')
          } else {
            blank.classlist.remove('buttonhighlight')
          }
          if (index.length >= 2) {
            but[index[0]].classlist.remove('buttonhighlight')
            index.splice(0, 1)
          }
        }
      }
      keyboardhighlight()
    </script>

　　上面实现的效果就是，ui 根据键盘所按的值 判断高亮，代码的话我暂时就不解释了，如果看不明白可以留言，但是 如果 当我按到 alt 或 ctrl 或 mefa 也就是 keycode值 等于18、17、91 时我是没办法判断用户按的是哪一个 键，因为值对应的键有两个，暂时还没找到办法待解决，后续解决会更新