jQueryでなくてもいいんだけどね

久しぶりのエントリー。

最新版は、以下を参照してください(2014/11/09更新)

Enter/Tab項目移動とFunctionKey制御 jqKeyプラグイン更新 - せかにゃ~


若い人にはわからないが、未だ死滅していないオンラインシステムを利用しているユーザは、[Enter]で次の入力項目に移動するという文化があります。
[Tab]で移動してくれればいいのだけど、年寄はわがままで融通が利かない・・・


そこでjQueryを使って実現してみました。


実はTabキーでの移動も問題があります。
ブラウザのツールバーにフォーカスが移動したり、タブブラウザでは、フォーカスが表示画面から外れてしまいます。


その辺の対応も含めて以下参照
動作サンプルWinのIE8とFirefox3.5のみ確認

var d   = document;
$(function(){

//==============================
// キー項入力 イベント
//==============================
	$(document).keydown(function(e){
		//入力キーコード
		var	keyCode		=	e.keyCode;	
		//shift alt ctrl 押下フラグ
		var	altKey		=	e.altKey;
		var	shiftKey	=	e.shiftKey;
		var	ctrlKey		=	e.ctrlKey;
		//Keyイベント伝播フラグ
		//	true:ブラウザで処理	false:ユーザで処理
		var	blKey		=	true;
		//キーが押された時のオブジェクト
		var	srcObj		=	e.target;

		//Keyメッセージ表示用
		var	Key		=	"keyCode:"+keyCode+":";

		if (keyCode == 13 ||keyCode == 9){
		//Enter tabによるフォーカス移動
			switch(srcObj.tagName){
			case "TEXTAREA":
				if (keyCode!=13) blKey = false;
				break;
			case "INPUT":	case "SELECT":
				//fileは巧く動かないので除外
				if (srcObj.type!="file")	blKey = false;
				break;
			default:
			}
			//keyイベントを処理するもののみ抽出
			if (!blKey){
				//フォームオブジェクトが何番目か探す
				var df = d.forms[0];
				var ln = df.length;
				var i;
				for (i=0;i<ln;i++){
					if (df[i]==srcObj) break;
				}
				//次のフォームオブジェクト探す
				srcObj = Focus_Move(df,i,ln,shiftKey);
			}
		}

		if (!blKey){
			//イベントを伝播しない
			if (srcObj.type!="file"){
				//IE規定の動作キャンセル
				if(d.all) window.event.keyCode = 0;
				srcObj.focus();
				if (srcObj.select && srcObj.type!="button")
					srcObj.select();
			}else{
				blKey = true;
			}
		}

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

		$("#lb_msg").text(Key);
		
		//blKey true:ブラウザで処理 false:
		return blKey;
	});

	//==============================
	// フォーカス移動
	//==============================
	var Focus_Move = function(df,i,ln,shift){
		//フォーカスを取得できないものは飛ばします

		var FcsObj;
		if (shift){
			//Shiftが押されていると当然フォーカスが前へ戻る
			while (--i >= 0){
			
				FcsObj	=	df[i];
				if	(FcsObj.type!="hidden" && 
					!FcsObj.disabled && 
					FcsObj.style.visibility!="hidden" && 
					FcsObj.tabIndex!=-1){
					//対象のオブジェクトを戻す
					return FcsObj;
				}
			}
			//Hitしない場合
			return Focus_Move(df,ln,ln,shift);
		}else{
			//フォーカス進む
			while (++i < ln){
			
				FcsObj	=	df[i];
				if	(FcsObj.type!="hidden" && 
					!FcsObj.disabled && 
					FcsObj.style.visibility!="hidden" && 
					FcsObj.tabIndex!=-1){
					return FcsObj;
				}
			}
			//Hitしない場合
			return Focus_Move(df,-1,ln,shift);
		}
	}
	
	
	
	//初期Focus設定
	d.forms[0][0].focus();
});

是非使ってみて!!