前回のjQuery|Enter|Tab|でフォーカス移動の続編でファンクションキーの制御をjQueryでやってみます。

業務WEBアプリだったら、ファンクションキーは必須ですよね。

普通にkeydownイベントで処理を行うと、ブラウザの規定動作が発現し邪魔しちゃいます。

例えば、[F1]:ヘルプ [F3]:検索 [F5]:更新 [F11]:最大化 などなど・・・

あと[BackSpace]で履歴の「前のページに戻る」を無効化する事も忘れちゃいけません。


そんなこんなで以下参照
動作サンプルWinのIE8とFirefox3.5のみ確認

var d   = document;
$(function(){

	//IE F1ヘルプ制御
	if (d.all) window.onhelp = function(){return false;}

//==============================
// キー項入力 イベント
//==============================
	$(document).keydown(function(e){
		var	keyCode		=	e.keyCode;	
		var	Key		=	"keyCode:"+keyCode+":";
		var	altKey		=	e.altKey;
		var	shiftKey	=	e.shiftKey;
		var	ctrlKey		=	e.ctrlKey;
		var	blKey		=	true;

		var	srcObj		=	e.target;


		if	((keyCode>=112) && (keyCode<=123)){
			switch(keyCode){
			case 112:Key+="[F1]";break;
			case 113:Key+="[F2]";break;
			case 114:Key+="[F3]";break;
			case 115:Key+="[F4]";break;
			case 116:Key+="[F5]";break;
			case 117:Key+="[F6]";break;
			case 118:Key+="[F7]";break;
			case 119:Key+="[F8]";break;
			case 120:Key+="[F9]";break;
			case 121:Key+="[F10]";break;
			case 122:Key+="[F11]";break;
			case 123:Key+="[F12]";break;
			}
			//ファンクションキー規定のブラウザ動作キャンセル
			blKey = false;
		}else if (keyCode == 8) {
		//backspaceキャンセル	[戻る]を制御
		//フォームで[backspace]は必要
			Key+="[backspace]";
			switch (srcObj.tagName) {
			case "INPUT":	case "TEXTAREA":
				break;
			default:
				blKey = false;
			}
		}
		if (!blKey){
			//イベントを伝播しない
			if (srcObj.type!="file"){
				//IE規定の動作キャンセル
				if(d.all) window.event.keyCode = 0;
			}else{
				blKey = true;
			}
		}

		if(shiftKey)	Key += "+[Shift]";
		if(ctrlKey)	Key += "+[Ctrl]";
		if(altKey)	Key += "+[Alt]";

		$("#lb_msg").text(Key);

		//blKey true/false:ブラウザでキーイベントを処理する/しない
		return blKey;
	});

});

わかるかなぁ?