最新历史版本
:JS实现键盘翻页效果 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1.概述编辑
1.1 问题描述
当我们报表有多页时，在展示时想使用键盘的上下键、左右键或空格键实现对报表的操作，如上下键实现翻页，该如何实现呢？
1.2 实现思路
通过 JS 获取按下按键的键值，根据键值对报表进行判断翻页操作。
2. 示例编辑
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();
}
})键盘按键对照表如下：
| 对应按键 | 按键十进制值 |
|---|---|
| 空格键（Space键） | 32 |
| Page Up键（PgUp键） | 33 |
| Page Down键（PgDn键） | 34 |
| LEFT ARROW键（←） | 37 |
| UP ARROW键（↑） | 38 |
| RIGHT ARROW键（→） | 39 |
| DOWN ARROW键（↓） | 40 |
3）保存模板，点击分页预览，当按键为 Page Up键（PgUp键）、LEFT ARROW键（←）、 UP ARROW 键（↑），即可跳转到上一页，
当按键为空格键（Space 键）、Page Down键（PgDn键）、RIGHT ARROW键（→）、DOWN ARROW 键（↓）即可跳转到下一页。
注：不支持移动端。