一旦习惯 Vim 的热键操作，网页浏览也会想用熟悉的热键操作，有人为热门浏览器开发了扩展，例如 Firefox 有个人觉得近完美的扩展解决方案 Vimperator 或 Pentadactyl，Chrome 则有不大完美的 Vichrome、Vimium 等[1]，还有些人直接写了类 vi 的浏览器，例如 dwb[2]，不过我想没用过 vi 的人不会去尝试这样的扩展或软件。
dwb 界面
那么，能不能直接使用 JavaScript，在网站中实现热键操作，让访问你网站的人都能享受，答案是可以的，知乎的快捷键就有些 vi 的感觉[3]。
知乎的快捷键
功能介绍
小博在右下角弄个回到顶部按钮，对长文而言，使用鼠标慢慢滚，拉到下面，一点就回到顶部，感觉方便的，但有时候还是感觉有些多余。键盘也可用空格或 Home End 等键，但我想说离得太远了，如若和鄙人一样使用 Poker II 等迷你键盘更是麻烦，何不采用 Vim 的热键来操作呢？使用 g g 来返回顶部不是更方便么？所以，鄙人就想使用 JavaScript 实现这么几个简单的键绑定：
| 热键 | 操作 |
|---|---|
j | 下滚一行 |
k | 上滚一行 |
2 j | 下滚 2 行 |
3 k | 上滚 3 行 |
g g | 回到顶部 |
G (Shift + g) | 滚到底部 |
注：2 j 中数字可以为任意正整数。
键盘事件
键盘操作自然离不开监听键盘事件，键盘事件有三个，分别是
| 事件 | 说明 | 属性 |
|---|---|---|
| keydown | 按下按键 | keyCode |
| keypress | 字符键按下 | charCode |
| keyup | 释放按键 | keyCode |
注：其中 keypress 事件是按下可输入字符的键就会触发，例如 a、b、c，若按下 Ctrl、Shift 等则不触发。
触发事件会返回对象，其中 keydown、keyup 事件会返回 keyCode 属性，有些浏览器比如 Firefox 还会返回 key 属性，但一般还是使用兼容性比较好的 keyCode；keypress 事件则会返回 charCode 属性。
其中 keyCode 的值可以在 MDN 找到[4]，charCode 则区分大小写，属性值基本等同于 ASCII 码[5]。
JavaScript Event KeyCodes[6]这个网站可以方便获取 keyCode 值，另外可以使用代码自己获取 keyCode：
window.addEventListener('keydown', function(event){ console.log(event) });charCode 值则可用下面代码获得：
window.addEventListener('keypress', function(event){ console.log(event) });说了这么多，上面所说需要用到的几个键，其 keyCode 及 charCode 如下：
| 按键 | keyCode | charCode |
|---|---|---|
Shift | 16 | 无 |
0 - 9 | 48 - 57 | 48 - 57 |
G | 71 | 71 |
g | 71 | 103 |
j | 74 | 106 |
k | 75 | 107 |
注：均为数字，非字符。
实现过程
上下滚一行
看几个快捷键操作，j、k 想必是最简单的，其余几个可能没有那么简单，所以先从简单的出发。
监听 keydown 事件，如果按下 j, k 键，使用 scrollBy() 方法实现上滚下滚一行[7]，假定行高为 20 个像素，那么：
function keysDown(event) {
if (event.keyCode == 74) {
window.scrollBy(0, 20);
}
if (event.keyCode == 75) {
window.scrollBy(0, -20);
}
}
window.addEventListener('keydown', keysDown, false);上下滚 n 行
数字的 keyCode 并不等于原数字，所以这里引入一个数组，当输入为数字时，将数组内对应值赋值为原数字。每次输入数字的时候，还要结合此前输入的数字进行计算，结合上面的上下滚一行，实现如下：
var lineHeight = 20; // 行高，可设置
var keys = [];
var row = 0;
function keysDown(event) {
if (event.keyCode == 74) {
if (row) {
window.scrollBy(0, lineHeight * row );
row = 0;
} else {
window.scrollBy(0, lineHeight);
}
}
if (event.keyCode == 75) {
if (row) {
window.scrollBy(0, -lineHeight * row );
row = 0;
} else {
window.scrollBy(0, -lineHeight);
}
}
if (event.keyCode >= 48 && event.keyCode <= 57) {
for (var i = 48; i <= 57; i ++) {
keys[i] = i - 48;
}
row = parseInt(row.toString() + keys[event.keyCode].toString());
}
}
window.addEventListener('keydown', keysDown, false);回到顶部
Vim 的普通模式下按下 g g，即双击 g，就回到顶部，双击一般有一个延时的处理，虽然看起来挺简单，但凭空想象还是需要时间的，二话不说先 Google 一番，很快便在 Stack Overflow 找到了解决方法[8]，不得不说这方法有些小聪明。
返回顶部用到了 scrollTo() 方法[9]，具体代码可以这样写：
var inCombo = false;
function keysDown(event) {
if (event.keyCode == 71) {
if (!inCombo) {
inCombo = true;
// 五百毫秒的延时，即需在半秒内完成双击
setTimeout('inCombo = false;', 500);
} else {
window.scrollTo(0, 0);
}
}
}
window.addEventListener('keydown', keysDown, false);滚到底部
滚到底部是 Shift + g，也即是组合键操作，不得不说 Google 才是人类的未来，一搜便可[10]。
这里滚到底部需要获取整个网页的高度，其实这是个大坑，offsetHeight、scrollHeight 傻傻分不清，各浏览器的标准也有区别，这里就随便丢了算是整个网页高度的 document.body.scrollHeight，其实真的很想简单粗暴丢个 99999：
var keys = [];
function keysDown(event) {
keys[event.keyCode] = true;
if (keys[16] && keys[71]) {
window.scrollTo(0, document.body.scrollHeight);
}
}
function keysUp(event) {
keys[event.keyCode] = false;
}
window.addEventListener('keydown', keysDown, false);
window.addEventListener('keyup', keysUp, false);完整代码
整合以上功能，且为一些浏览器做兼容之后[11]，完整代码如下：
var inCombo = false;
var lineHeight = 20;
var keys = [];
var row = 0;
function keysDown(event) {
keys[event.keyCode] = true;
if (keys[16] && keys[71]) {
window.scrollTo(0, document.body.scrollHeight );
}
if (keys[71]) {
if (!inCombo) {
inCombo = true;
setTimeout('inCombo = false;', 500);
} else {
window.scrollTo(0, 0);
}
}
if (keys[74]) {
if (row) {
window.scrollBy(0, lineHeight * row );
row = 0;
} else {
window.scrollBy(0, lineHeight);
}
}
if (keys[75]) {
if (row) {
window.scrollBy(0, -lineHeight * row );
row = 0;
} else {
window.scrollBy(0, -lineHeight);
}
}
if (event.keyCode >= 48 && event.keyCode <= 57) {
for (var i = 48; i <= 57; i ++) {
keys[i] = i - 48;
}
row = parseInt(row.toString() + keys[event.keyCode].toString());
}
}
function keysUp(event) {
keys[event.keyCode] = false;
}
if(window.addEventListener){
window.addEventListener('keydown', keysDown, false);
window.addEventListener("keyup", keysUp, false);
} else if (document.attachEvent){
document.attachEvent('onkeydown', keysDown);
document.attachEvent('onkeyup', keysUp);
} else {
document.addEventListener('keydown', keysDown, false);
document.addEventListener("keyup", keysUp, false);
}上面说了那么多，原来也不需要用到 keypress，如果做到严格一点，区分大小写，或许 keypress 就派上用场。不过我想现在大多数人的大写锁定键基本不用到，所以也没必要较劲。为啥不实现 Ctrl + f， Ctrl + b 等？因为 Ctrl + * 本身就是浏览器的热键，还需考虑如何屏蔽。
另外，可以用 jQuery 简单实现平滑滚动而非直接定位，或者也可自己写，在此鄙人不想折腾了。
哦，对了，鄙人已将代码部署到本博，顺便学一下知乎，加按 c 查看评论，赶紧使用 g g 试试吧～
参考资料
本文历史
- 2015 年 09 月 20 日 完成初稿