ショートカットキーで記事を移動

Bloglinesのショートカットキーにつられて、意味なくブログの記事に導入してみる。
jで次の記事、kで前の記事。
Firefoxでのみ確認。

手順は、MTのテンプレートで各記事の頭にaタグでハッシュを用意。
ハッシュは適当にentry+エントリーIDとして、識別用にclassをentryAnchorで統一。
で、ページ読み込み後(body onload)にクラス名からハッシュを拾う。
後は、ドキュメントでキープレスを監視(document.onkeypress)して、jかkのときにハッシュを変更

キープレス監視とエントリー移動(ハッシュ変更)
/**
 * ショートカットキーでのエントリー移動
 *
 * shortcutkey.js
 */

/** エントリーアンカー配列を初期化 */
var moveEntryFlag   = false; // エントリーのアンカー移動をするか制御
var entryAnchorNum  = 0;
var entryAnchorList = new Array();

function initEntryAnchor() {
	var entryAnchorDom = document.getElementsByClassName('entryAnchor');
	if (entryAnchorDom) {
		for (var i=0; i<entryAnchorDom.length; i++) {
			entryAnchorList[i] = entryAnchorDom[i].name;
		}
		moveEntryFlag = true;
	} else {
		moveEntryFlag = false;
	}
}

/**
 * ページ上全てのキープレスを監視
 */
document.onkeypress = watchWholeKeyPress; 
function watchWholeKeyPress(e) {
	// キーコードを取得
	var pressKeyCode;
	if (document.all) {
		pressKeyCode = String.fromCharCode(event.keyCode);
	} else if (document.getElementById) {
		pressKeyCode = String.fromCharCode((e.keyCode!=0)?e.keyCode:e.charCode);
	} else if (document.layer) {
		pressKeyCode = String.fromCharCode(e.which);
	} else {
	}
	// キーコード別の動作振り分け
	if (pressKeyCode == 'j' && moveEntryFlag) {
		// 'j'が押された場合; 次のエントリー
		nextEntry();
	} else if (pressKeyCode == 'k' && moveEntryFlag) {
		// 'k'が押された場合; 前のエントリー
		prevEntry();
	} else {
	}
}

/**
 * 次のエントリーに移動
 */
function nextEntry() {
	if (entryAnchorNum<entryAnchorList.length) {
		entryAnchorNum++;
		location.hash = entryAnchorList[entryAnchorNum];
	} else {
	}
}

/**
 * 前のエントリーに移動
 */
function prevEntry() {
	if (entryAnchorNum>0) {
		entryAnchorNum--;
		location.hash = entryAnchorList[entryAnchorNum];
	} else {
	}
}

getElementsByClassNameは人様のをパクリ。
同時に複数の要素のスタイルを変える

プロフィール

このブログ記事について

このページは、koshigoeが2005年10月17日 23:57に書いたブログ記事です。

ひとつ前のブログ記事は「SBSの保護というか記事の保存」です。

次のブログ記事は「ショートカットキーでの移動をいじる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。