jQueryのキーイベントについて調ベてみた

jQueryのキー操作周りのイベントについて少し調べてみました。

キーイベントについて

keydown、keyup、keypressの3種類があります。

keypressはブラウザによって挙動が違う場合があるらしいので、特にkeypressでないとだめという場合でなければ、keydownかkeyupを使うのが無難そうです。
ちなみに処理の実行される順番はkeydown→keypress→keyupのようです。

HTML

<textarea id="sample01"></textarea>

JavaScript

$(function() {
	$(document).on('keydown', '#sample01', function(e) {
		console.log('===== keydown ====='); // 1番目に実行される
		console.log(e);
		console.log(e.keyCode);
	});
	$(document).on('keyup', '#sample01', function(e) {
		console.log('===== keyup ====='); // 3番目に実行される
		console.log(e);
		console.log(e.keyCode);
	});
	$(document).on('keypress', '#sample01', function(e) {
		console.log('===== keypress ====='); // 2番目に実行される
		console.log(e);
		console.log(e.keyCode);
		console.log(e.which);
	});
});

jQueryのキーイベントのデモページ
各イベント時に取得できるkeyCodeはキーコード一覧を参考にしました。
　

CtrlやShift、Altと何かキーを同時に押す場合

CtrlやShift、Altと何かキーを同時に押す場合は、専用のイベントがあるようです。

HTML

<textarea id="sample02">カット、コピー、ペーストのイベントを取得してみます。</textarea>

JavaScript

$(function() {
	$(document).on('keydown', '#sample02', function(e) {
		if(e.ctrlKey) {
			if(e.keyCode === 88) {
				console.log('カットしました');
			}
			if(e.keyCode === 67) {
				console.log('コピーしました');
			}
			if(e.keyCode === 86) {
				console.log('ペーストしました');
			}
		}
		if(e.shiftKey) {
			console.log('Shiftを押しています');
		}
		if(e.altKey) {
			console.log('Altを押しています');
		}
	});
});

CtrlやShift、Altと何かキーを同時に押す場合のデモページ
　

特定のキーの入力を効かないようにする場合

HTML

<textarea id="sample03">バックスペースキーが効かないようにしています。</textarea>

JavaScript

$(function() {
	$(document).on('keydown', '#sample03', function(e) {
		if(e.keyCode === 8) {
			return false;
		}
	});
});

特定のキーの入力を効かないようにする場合のデモページ
　

複数のボタンを押した時に何らかの処理をする場合

CtrlやShift、Altではない特定のキーを複数押した時に、処理を行ってみます。

HTML

<textarea id="sample04">aを押しながら他のキーを押すとコンソールがでます。</textarea>

JavaScript

$(function() {
	var flag = false;
	$(document).on('keydown', '#sample04', function(e) {
		if(e.keyCode === 65) {
			flag = true;
		} else if(flag == true) {
			console.log('aを押しながら他のキーを押しました');
		}
	});
	$(document).on('keyup', '#sample04', function(e) {
		if(e.keyCode === 65) {
			flag = false;
		}
	});
});

複数のボタンを押した時に何らかの処理をする場合のデモページ
　

矢印キーを使って移動処理を行ってみる

矢印キーを押した時に、要素が移動するサンプルです。
(厳密には要素が移動しているのではなく、class名を移動させています。)

HTML

<div id="sample05"></div>

CSS

#sample05 {
	width: 900px;
	height: 900px;
	overflow: hidden;
	margin: 0 auto;
	border: #333 1px solid;
}
#sample05 .squares {
	float: left;
	width: 10%;
	height: 10%;
}
#sample05 .current {
	background: #E74C3C;
}

JavaScript

var maxW = 10;
var maxH = 10;
var currentW = 5;
var currentH = 5;

$(function() {
	var insert = '';
	for (var i = 0; i < 100; i++) {
		insert += '<div class="squares"></div>';
	};
	$('#sample05').append(insert);
	$('#sample05 .squares').eq(currentSquares()).addClass('current');

	$(window).on('keydown', function(e) {
		if(e.keyCode === 37) { // ←
			if(currentW > 0) {
				currentW -= 1;
				currentSquares();
				return false;
			}
		}
		if(e.keyCode === 38) { // ↑
			if(currentH > 0) {
				currentH -= 1;
				currentSquares();
				return false;
			}
		}
		if(e.keyCode === 39) { // →
			if(currentW < maxW - 1) {
				currentW += 1;
				currentSquares();
				return false;
			}
		}
		if(e.keyCode === 40) { // ↓
			if(currentH < maxH - 1) {
				currentH += 1;
				currentSquares();
				return false;
			}
		}
	});
});

function currentSquares() {
	$('#sample05 .squares').removeClass('current').eq((currentH * maxW) + currentW).addClass('current');
}

矢印キーを使って移動処理を行ってみるデモページ
　

【参考サイト】

• keydown(fn) – jQuery 日本語リファレンス
• keypress(fn) – jQuery 日本語リファレンス
• jQueryを使ってキーの同時押し取得(shiftやctrl) – Qiita
• キーコード一覧
• jQueryでファンクションキーやバックスペースキーを無効化する制御