JS实现键盘翻页效果

1.1 问题描述

当我们报表有多页时，在展示时想使用键盘的上下键、左右键或空格键实现对报表的操作，如上下键实现翻页，该如何实现呢？

1.2 实现思路

通过 JS 获取按下按键的键值，根据键值对报表进行判断翻页操作。

1）准备一个预览时多页呈现的模板。

2）点击菜单模板>模板 Web 属性>分页预览设置，选择 为该模板单独设置，添加一个加载结束事件，如下图所示：

JavaScript 代码如下：

//获取键盘按键按下事件
$(document).bind('keydown', function(e) {
//获取按键键值
var key = window.event ? e.keyCode : e.which;
//alert(key);
if (key.toString() == "33"|| key.toString() == "37" || key.toString() == "38") {
//跳转到上一页
contentPane.gotoPreviousPage();
} 
else if (key.toString() == "32" || key.toString() == "34"|| key.toString() == "39" || key.toString() == "40") {
//跳转到下一页
_g().gotoNextPage();
}
})

键盘按键对照表如下：

3）保存模板，点击分页预览，当按键为 Page Up键（PgUp键）、LEFT ARROW键（←）、  UP ARROW 键（↑），即可跳转到上一页，

当按键为空格键（Space 键）、Page Down键（PgDn键）、RIGHT ARROW键（→）、DOWN ARROW 键（↓）即可跳转到下一页。