Блог

Я создаю виртуальную клавиатуру, которая принимает звук и цвет фона при нажатии определенной клавиши на клавиатуре. Пока все хорошо, я реализую звук и визуальный эффект фона CSS на каждой клавише, но только буквенные клавиши, специальные клавиши принимают только звук без цвета фона, который является классом CSS .нажат.

Небольшой пример: я ловлю буквенные клавиши с разным классом, которые равны списку событий, который прослушивает нажатие определенной клавиши.

 lt;div class="keyboard__row"gt;  lt;kbd class="keyboard__key keyboard__key--size2"gt;Tablt;/kbdgt;  lt;kbd class="q keyboard__key"gt;Qlt;/kbdgt;  lt;kbd class="w keyboard__key"gt;Wlt;/kbdgt;  lt;kbd class="e keyboard__key"gt;Elt;/kbdgt;  lt;kbd class="r keyboard__key"gt;Rlt;/kbdgt;  lt;kbd class="t keyboard__key"gt;Tlt;/kbdgt;  lt;kbd class="y keyboard__key"gt;Ylt;/kbdgt;  lt;kbd class="u keyboard__key"gt;Ult;/kbdgt;  lt;kbd class="i keyboard__key"gt;Ilt;/kbdgt;  lt;kbd class="o keyboard__key"gt;Olt;/kbdgt;  lt;kbd class="p keyboard__key"gt;Plt;/kbdgt;  lt;kbd class=" keyboard__key"gt;{lt;/kbdgt;  lt;kbd class=" keyboard__key"gt;}lt;/kbdgt;  lt;kbd class="keyboard__key keyboard__key--size3"gt;lt;/kbdgt;     /**  * Function that listen for pressed keys and creating visual   * effect at the current pressed key.  */  document.addEventListener("keypress", function(event) {   keySound(event.key);   keyAnimation(event.key);  });   /**  * Adding the audio file to the specific pressed key.  */  function keySound(key) {   let audio = new Audio("assets/sounds/key-sound.mp3");  audio.play();  }  /**  * Selecting by class name of each key, and do background effect with timeout.  */  function keyAnimation(currentKey) {   let activeKey = document.querySelector("."   currentKey);   activeKey.classList.add("is-pressed");   setTimeout(function () {  activeKey.classList.remove("is-pressed");  }, 100); }