ねはぴれ

jsでショートカット

ショートカットといえば
ctrl + a
ctrl + c
ctrl + v
などをよく使うのではないでしょうか。
今回はそのショートカットをJavascriptで実装する方法を紹介します。

目次

使ってみよう

実はこのサイトにもショートカットが実装されています。

qを押すと、背景が赤になります。


もう一回同じことをすると戻ります。

ということでやり方を説明していきます。

やり方

まずはさっきの背景が赤くなるコードを見てみましょう。

const body = document.querySelector('body');

window.addEventListener('keydown', function (event) {
	if(event.key === 'q'){
		changeBodyColor();
	}
});

function changeBodyColor() {
	if(body.style.background == 'red'){
		body.style.background = '#f5f5f5';
	} else {
		body.style.background = 'red';
	}
}

関数changeBodyColorは背景色を赤かグレーに変更する関数です。


3行目にあるkeydownというイベントは、キーが押された時に発生するイベントで、その押されたキーが

q場合にchangeBodyColor関数を呼び出しています。

event.code

さっきは
event.key == 'q'

で押されたキーを判定していましたが、event.codeを使う方法もあるのでみてみましょう。

if(event.code === 'KeyQ'){
	//処理
}

event.keyCodeを使う方法もありますが、keyCodeは非推奨となっているのでおすすめはしません。


キーの値が知りたいときはこちらの記事をご覧ください。

ショートカット


例えばShiftキーを押すとevent.keyの値はShiftになるので、このように書いてください。

//event.key
if(event.key === 'Shift'){
	//処理
}

//event.code
if(event.code === 'ShiftLeft' || event.code === 'ShiftRight'){
	//処理
}


Shiftキーは2つあるので注意してください。


また、control,shift,altキーは省略することができます。

if ((event.ctrlKey || event.key === 'Meta') && event.shiftKey && event.altKey){
	//処理
}

Macではevent.ctrlKeyを使用すると、^controlキーが認識されます。
WindowsのCtrlと言ったらMacユーザーは⌘commandキーを使うと思いますので、keyかcodeで判定するようにした方がいいでしょう。


あとmacの⌥optionキーはevent.altKeyで判定できるようですね。

関連記事