Как при навесить обработчик события на комбинацию клавиш?

Question

Есть 3 дива. На каждый из них я повесил по кнопке и при нажатии у дива появляется бордер. А как сделать так что бы при нажатии комбинации Ctrl + A бордер появлялся сразу у всех дивах?

let divfirst = document.querySelector('#first');
let divsecond = document.querySelector('#second');
let divthird = document.querySelector('#third');
let divs = document.querySelectorAll('div')

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyG') {
    divfirst.style.border = "8px solid red";
  }
  if (event.code == 'KeyR') {
    divsecond.style.border = "8px solid red";
  }
  if (event.code == 'KeyB') {
    divthird.style.border = "8px solid red";
  }
  if (event.ctrlKey && event.key === 'z') {
    divs.style.border = "8px solid red";
  }
});

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

Answer 1

ctrl+a выделяет ctrl+z отменяет выделение у всех..

<style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 10px;
        }
    </style>

    <body>
        <div class='_border' id="first"></div>
        <div class='_border' id="second"></div>
        <div class='_border' id="third"></div>
    
        <script>
          
    
        let divfirst = document.querySelector('#first');
        let divsecond = document.querySelector('#second');
        let divthird = document.querySelector('#third');
        let _border = document.querySelectorAll('._border');

        document.addEventListener('keyup', function (event) {
          if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)){
            window.getSelection().removeAllRanges();
          }
        })
        document.addEventListener('keydown', function (event) {
                if (event.code == 'KeyA' && (event.ctrlKey || event.metaKey)) {
                  _border.forEach(e=>{
                    e.style.border ="8px solid red";
                  })
                }
                 if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
                  _border.forEach(e=>{
                    e.style.border ="";
                  })
                }
                if (event.code == 'KeyG') {
                    divfirst.style.border ="8px solid red";
                }
                if (event.code == 'KeyR') {
                    divsecond.style.border ="8px solid red";
                }
                if (event.code == 'KeyB') {
                    divthird.style.border ="8px solid red";
                }
            });
        
        
        
    
        </script>

Answer 2

Вы сначала используете event.code, а потом event.key. Лучше все писать в одном стиле.
Нельзя просто сделать на группу querySelectorAll стиль через .style, нужно перебрать их через forEach и повесить стиль на каждый item

let divfirst = document.querySelector('#first');
    let divsecond = document.querySelector('#second');
    let divthird = document.querySelector('#third');
    let divs =document.querySelectorAll('div')

    document.addEventListener('keydown', function (event) {
        if (event.code == 'KeyG') {
            divfirst.style.border = "8px solid red";
        }
        if (event.code == 'KeyR') {
            divsecond.style.border = "8px solid red";
        }
        if (event.code == 'KeyB') {
            divthird.style.border = "8px solid red";
        }
        if (event.ctrlKey && event.code == 'KeyZ') {
            divs.forEach(item => {
                item.style.border = "8px solid red";
            })
        }
    });

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

Answer 3

let divfirst = document.querySelector('#first');
let divsecond = document.querySelector('#second');
let divthird = document.querySelector('#third');

document.addEventListener('keydown', function(event) {
  const divs = [];
  switch (event.code) {
    case 'KeyA':
      if (event.ctrlKey) {
        divs.push(divfirst);
        divs.push(divsecond);
        divs.push(divthird);
        event.preventDefault();
      }
      break;
    case 'KeyG': divs.push(divfirst); break;
    case 'KeyR': divs.push(divsecond); break;
    case 'KeyB': divs.push(divthird); break;
  }
  divs.forEach(div => div.style.border = "8px solid red");
});

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px;
}

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

БЛОГ НА HUSL

Как при навесить обработчик события на комбинацию клавиш?

Ответы (3 шт):