Блог

Главная - Вопросы по программированию - использование клавиатуры для подсветки окна с помощью javascript

использование клавиатуры для подсветки окна с помощью javascript

#javascript

#javascript

Вопрос:

Как заставить определенную клавишу заставлять окно / выделение на вашем экране загораться при нажатии? например, если я нажму M, я хочу, чтобы загорелось среднее окно

Комментарии:

1. window.addEventListener("keypress", function (e) { /* check e.keyCode, do stuff */ });

2. итак, у меня есть сетка, и я хочу, чтобы загорелось окно 5.

3. если это мой HTML</head> <body> <div class=»grid-container»> <div class=»item1″> 1</div> <div class=»item2″> 2</div> <div class=»item3″>3</div> <div class=»item4″> 4</div> <div class=»item5″> 5</div> <класс div =»item6″>6</div> <div class=»item7″>7</div> <div class=»item8″>8</div> <div class=»item9″>9</div> </div> </body> </html>

4. что мне нужно написать в javascript, чтобы оно загорелось? извините, я новичок во всем этом процессе и просто хотел бы получить разъяснения

5. Здесь вам понадобится какой-нибудь скрипт libby. Я бы использовал имя класса keyCode для сопоставления.

Ответ №1:

Далее мы перечисляем для клавиши вниз и ищем элемент, реализующий класс, и добавляем подсветку. (ПРИМЕЧАНИЕ: Используйте querySelectorAll и forEach, если вам нужно несколько)

 const findDiv = (key) => {
  let className = `.key${key}`; 
  return document.querySelector(className);
};

document.addEventListener('keydown', (e) => {
  let div = findDiv(e.key);
  if(div) div.classList.add('highlight');
});

document.addEventListener('keyup', (e) => {
  document.querySelectorAll('.item').forEach(d => d.classList.remove('highlight'));
});  
 .highlight {
  background-color: yellow;
}  
 <div class="grid-container">
  <div class="item keyShift">1</div>
  <div class="item keyArrowDown">2</div>
  <div class="item keyArrowUp">3</div>
  <div class="item keyArrowLeft">4</div>
  <div class="item keyArrowRight">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Комментарии:

1. Боже, большое вам спасибо за помощь, действительно ценю, что помогаете мне изучать новые сложные техники

2. Нет проблем, удачного кодирования.

3. Я не думаю, class = "item keyShift" что это сработает. С помощью «Shift» нам нужно указать class = "item keyShiftLeft keyShiftRight"

4. Это действительно работает. Попробуйте :). Libby вот полный список названий клавиш. developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key /…

5. @Cat помните, что это всего лишь демонстрация, я уверен, что Либби имеет в виду свои собственные клавиши. Список поможет ей выбрать.