クリック時に特殊キーを検知させる

赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

戻る

実例

（シフトキーを押しながらクリック）

例文

<input type="button" value="クリック" onClick="keyClick(event)"> //*1
<span id="text_key"></span>

<script type="text/javascript">
//クリック時の動作
function keyClick(event) { //*2
	//イベント処理
	var key_event = event || window.event; //*3
	var key_shift = (key_event.shiftKey); //*4
	var key_ctrl = (key_event.ctrlKey);
	var key_alt = (key_event.altKey);
	var key_meta = (key_event.metaKey);
	//キーに対応した処理
	var s = "click! ";
	if (key_shift) s += "shiftキー ";
	if (key_ctrl) s += "ctrlキー ";
	if (key_alt) s += "altキー ";
	if (key_meta) s += "metaキー ";
	//出力
	document.getElementById("text_key").innerHTML = s;
}
</script>

解説

(*1)ボタンをクリックするとonClickにてイベントが発生し、変数eventでキー入力の状態が伝えられます。
(*2)変数eventでキー入力のイベントを受け取ります。（Firefox用）
(*3)Internet Explorerでは「window.event」を使うため、変数key_eventにどちらかのイベントを取得させます。
(*4)変数key_shiftにshiftキーの状態を代入します。押されていたらtrue、そうでなければfalseです。
検知したいキーがctrlキーの場合は「ctrlKey」、Windowsのaltキー（MacOSではoptionキー）なら「altKey」、MacOSのcommandキーは「metaKey」です。

後は、キーの状態に応じた処理を記述します。

応用

複数のボタンを置いて、onClickからイベントを受け取ると同時にボタンの識別をするために引数を受け取りたい場合があります。
この場合は、イベントと引数を分離させる必要がありますので、onKeyDownとonKeyUpを使ってキー入力のイベントを事前に取得します。

（シフトキーを押しながらクリック）

例文

<input type="button" value="①" onClick="keyClick(1)">
<input type="button" value="②" onClick="keyClick(2)">
<input type="button" value="③" onClick="keyClick(3)">
<span id="text_key"></span>

<script type="text/javascript">
//特殊キーの初期値
key_shift = false;
key_ctrl = false;
key_alt = false;
key_meta = false;

//キーが押されていることを検知
document.onkeydown = function(event) {
	var key_event = event|| window.event;
	key_shift = (key_event.shiftKey);
	key_ctrl = (key_event.ctrlKey);
	key_alt = (key_event.altKey);
	key_meta = (key_event.metaKey);
	//出力
	keyClick2(0);
}

//キーが離されたことを検知
document.onkeyup = function(event) {
	var key_event = event|| window.event;
	key_shift = (key_event.shiftKey);
	key_ctrl = (key_event.ctrlKey);
	key_alt = (key_event.altKey);
	key_meta = (key_event.metaKey);
	//出力
	keyClick2(0);
}

//クリック時の動作
function keyClick(num) {
	var s = "";
	if (num > 0) s = num + ":click! ";
	
	if (key_shift) s += "shiftキー ";
	if (key_ctrl) s += "ctrlキー ";
	if (key_alt) s += "altキー ";
	if (key_meta) s += "metaキー ";
	//出力
	document.getElementById("text_key").innerHTML = s;
}
</script>

戻る