本文 UI 参考: https://www.cnblogs.com/2979100039-qq-con/archive/2020/04/06/12641603.html
- 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 || Windows.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 时我是没办法判断用户按的是哪一个 键, 因为值对应的键有两个, 暂时还没找到办法待解决, 后续解决会更新
来源: https://www.cnblogs.com/SuperBrother/p/12643162.html