Vim 热键

一旦习惯 Vim 的热键操作,网页浏览也会想用熟悉的热键操作,有人为热门浏览器开发了扩展,例如 Firefox 有个人觉得近完美的扩展解决方案 Vimperator 或 Pentadactyl,Chrome 则有不大完美的 Vichrome、Vimium 等[1],还有些人直接写了类 vi 的浏览器,例如 dwb[2],不过我想没用过 vi 的人不会去尝试这样的扩展或软件。

dwb 界面 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 事件是按下可输入字符的键就会触发,例如 abc,若按下 CtrlShift 等则不触发。

触发事件会返回对象,其中 keydownkeyup 事件会返回 keyCode 属性,有些浏览器比如 Firefox 还会返回 key 属性,但一般还是使用兼容性比较好的 keyCodekeypress 事件则会返回 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) });

说了这么多,上面所说需要用到的几个键,其 keyCodecharCode 如下:

按键 keyCode charCode
Shift 16
0 - 9 48 - 57 48 - 57
G 71 71
g 71 103
j 74 106
k 75 107

注:均为数字,非字符。

实现过程

上下滚一行

看几个快捷键操作,jk 想必是最简单的,其余几个可能没有那么简单,所以先从简单的出发。

监听 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]

这里滚到底部需要获取整个网页的高度,其实这是个大坑,offsetHeightscrollHeight 傻傻分不清,各浏览器的标准也有区别,这里就随便丢了算是整个网页高度的 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 + fCtrl + b 等?因为 Ctrl + * 本身就是浏览器的热键,还需考虑如何屏蔽。

另外,可以用 jQuery 简单实现平滑滚动而非直接定位,或者也可自己写,在此鄙人不想折腾了。

哦,对了,鄙人已将代码部署到本博,顺便学一下知乎,加按 c 查看评论,赶紧使用 g g 试试吧~

参考资料

本文历史

  • 2015 年 09 月 20 日 完成初稿