在键盘按钮项目中添加EventListener

Question

我有一个关于键盘的迷你项目，我想知道如何在我的 JavaScript 代码中添加 addEventListener 如果我按下自己的键盘中的某个键，在我的项目中显示该按钮并将该按钮的背景颜色更改为出色地 如果有人帮助我的话，我很快就需要你的帮助。 非常感谢！！

我想尝试一下，如果我按下自己的键盘中的某个键，键盘项目中的该键会为我显示并更改该按钮的背景颜色。

Answer 1

要实现此目的，您可以在 JavaScript 代码中侦听 keydown 事件，并在按下某个键时触发一个函数。每当在物理键盘上按下某个键时，都会触发此事件，然后您可以在键盘项目中找到相应的按钮，将其显示出来，并更改其背景颜色。

在 JavaScript 文件中，添加事件侦听器以检测何时按下物理键盘上的按键。

    document.addEventListener('keydown', function(event) {
  // Get the pressed key
  const pressedKey = event.key.toUpperCase(); // Ensure it's uppercase

  // Find the corresponding button in the virtual keyboard
  const button = document.querySelector(`button[data-key="${pressedKey}"]`);

  if (button) {
    // Change the background color of the button when the key is pressed
    button.style.backgroundColor = 'yellow'; // You can change this color
  }
});

// Optional: Remove the background color when the key is released
document.addEventListener('keyup', function(event) {
  const releasedKey = event.key.toUpperCase();
  const button = document.querySelector(`button[data-key="${releasedKey}"]`);
  
  if (button) {
    // Reset the background color when the key is released
    button.style.backgroundColor = ''; // Reset to original color
  }
});

角度分量示例：

import { Component, Renderer2, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-keyboard',
  templateUrl: './virtual-keyboard.component.html',
  styleUrls: ['./virtual-keyboard.component.css']
})
export class VirtualKeyboardComponent implements OnInit {

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    // Listen for keydown events in the entire document
    this.renderer.listen('document', 'keydown', (event) => {
      this.highlightKey(event.key.toUpperCase());
    });

    this.renderer.listen('document', 'keyup', (event) => {
      this.removeHighlight(event.key.toUpperCase());
    });
  }

  highlightKey(key: string) {
    const button = document.querySelector(`button[data-key="${key}"]`);
    if (button) {
      button.style.backgroundColor = 'yellow'; // Change color
    }
  }

  removeHighlight(key: string) {
    const button = document.querySelector(`button[data-key="${key}"]`);
    if (button) {
      button.style.backgroundColor = ''; // Reset color
    }
  }
}

Angular 组件的 HTML 模板：

<div id="keyboard">
  <button class="key" data-key="A">A</button>
  <button class="key" data-key="B">B</button>
  <button class="key" data-key="C">C</button>
  <!-- Add more keys as needed -->
</div>