增加上下页和上下篇键盘按键切换功能

给博客增加了上一页、下一页、上一篇和下一篇的键盘按键切换,这个功能实现很简单

获取键盘按键可以通过js来获取到用户按下的键,可以在百度搜索对应的keyCode,或者自己打印一下

$(document).keydown(function(event){
    console.log(event.keyCode);
});

这里提供一个简记表

数字值 实际键值
48到57 0到9
65到90 a到z(A到Z)
112到135 F1到F24
8 BackSpace(退格)
9 Tab
13 Enter(回车)
20 Caps_Lock(大写锁定)
32 Space(空格键)
37 Left(左箭头)
38 Up(上箭头)
39 Right(右箭头)
40 Down(下箭头)

然后我们就只需要找到对应切换页面的class或者id等信息,根据键盘按键跳转即可

$(document).keydown(function(event){
    if (event.keyCode === 37) {
        var prev = $(".prev").attr('href');
        if (prev !== undefined) {
            window.location.href = prev;
        }
    } else if ( event.keyCode === 39) {
        var next = $(".next").attr('href');
        if (next !== undefined) {
            window.location.href = next;
        }
    }
});

现在你就可以体验按一下键盘上的左箭头<-按键,来访问上一篇文章PHP实现码云Gitee的WebHook密钥验证算法

5 条评论

发表评论

*