キーボードの入力時の処理

何かキーボードのキーを押してください。
<div id="output"></div>
const output= document.getElementById('output');

document.addEventListener('keydown', function(button){
   output.textContent = `${button.key}が押されています。`;
});

document.addEventListener('keyup', function(button){
   output.textContent = `${button.key}が離されました。`;
});
上の例では、キーボードのキーが押されたとき、離されたときに表示が変わるようになっています。

特定の要素を指定せずに全体に対して処理を行うときは
要素.addEventListener

ではなく
document.addEventListener

とします。

document.addEventListener('keydown', function(){
処理内容;
});

とすることでキーボードから入力されたとき、

document.addEventListener('keyup', function(){
処理内容;
});

とすることでキーボードから離されたときの処理を行うことができます。

また、addEventListenerの第2引数の関数の引数を記入すると入力されたキーボードの情報を取得することができます。
第2引数の関数の引数.key
と記入することで押されたキーを取得することができます。