跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 插件商店
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • Windows版本
      • 表单
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • Foxit eSign
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • WebSDK,按钮,按钮禁用,页面

福昕 PDF SDK(Web):禁用 / 启用页面跳页按钮(首页 / 上一页 / 下一页 / 末页)

  • 福昕知识库
  • 2026-06-17

一、适用场景

在福昕 PDF WebSDK 集成页面中,需要临时禁用 / 启用页面跳页控制按钮(首页、上一页、下一页、末页),禁止用户点击跳转,同时保持按钮可见但置灰、不可交互,满足权限控制、流程限制等业务需求。

二、核心功能说明

提供通用工具函数,通过按钮name属性精准定位福昕 PDF 工具栏跳页按钮,实现:
      1. 禁用按钮:添加disabled属性、置灰样式、鼠标禁止样式,彻底拦截所有点击 / 键盘事件,杜绝通过快捷键触发跳转;
    1. 启用按钮:恢复可点击状态、正常样式、移除事件拦截,恢复原生交互。

三、完整代码实现

1. 工具函数(直接复制使用)

				
					/**
 * 禁用/启用福昕PDF WebSDK工具栏按钮
 * @param {string} btnName - 按钮name属性(必填),跳页按钮固定值:
 *                            goto-first-page(首页)、goto-prev-page(上一页)
 *                            goto-next-page(下一页)、goto-last-page(末页)
 * @param {boolean} isDisabled - 控制状态(必填):true=禁用,false=启用
 */
function setFoxitBtnDisabled(btnName, isDisabled) {
    // 精准匹配福昕PDF工具栏按钮DOM
    const btn = document.querySelector(`button[name="${btnName}"]`);
    // 未找到按钮则直接退出,避免报错
    if (!btn) return;

    if (isDisabled) {
        // --------------- 禁用按钮逻辑 ---------------
        // 原生禁用属性
        btn.disabled = true;
        // 按钮置灰视觉效果
        btn.style.opacity = "0.4";
        // 鼠标悬浮禁止样式
        btn.style.cursor = "not-allowed";
        
        // 定义事件拦截函数:彻底阻断点击、键盘操作
        const blockEvent = (e) => {
            e.stopImmediatePropagation(); // 阻止事件冒泡
            e.preventDefault(); // 阻止默认行为
        };
        
        // 绑定拦截事件(捕获阶段触发,优先级最高)
        btn.addEventListener("click", blockEvent, true);
        btn.addEventListener("keydown", blockEvent, true);
        
        // 存储事件句柄,用于启用时移除
        btn._blockEvent = blockEvent;
    } else {
        // --------------- 启用按钮逻辑 ---------------
        // 移除原生禁用属性
        btn.disabled = false;
        // 恢复正常视觉样式
        btn.style.opacity = "1";
        btn.style.cursor = "pointer";
        
        // 移除之前绑定的事件拦截(避免重复绑定)
        if (btn._blockEvent) {
            btn.removeEventListener("click", btn._blockEvent, true);
            btn.removeEventListener("keydown", btn._blockEvent, true);
            // 删除存储的事件句柄
            delete btn._blockEvent;
        }
    }
}
				
			

2. 调用示例(按需复制)

				
					// ------------------- 禁用所有跳页按钮 -------------------
setFoxitBtnDisabled("goto-first-page", true);   // 禁用【首页】
setFoxitBtnDisabled("goto-prev-page", true);    // 禁用【上一页】
setFoxitBtnDisabled("goto-next-page", true);    // 禁用【下一页】
setFoxitBtnDisabled("goto-last-page", true);    // 禁用【末页】

// ------------------- 单独启用某一个按钮 -------------------
// setFoxitBtnDisabled("goto-next-page", false);  // 启用【下一页】
// setFoxitBtnDisabled("goto-prev-page", false);  // 启用【上一页】
				
			

四、参数说明

 
 
参数名类型必填说明
btnNamestring是

福昕跳页按钮固定 name 值:

 

・goto-first-page:首页

 

・goto-prev-page:上一页

 

・goto-next-page:下一页

 

・goto-last-page:末页

isDisabledboolean是

控制按钮状态:

 

・true:禁用(不可点击、置灰)

 

・false:启用(可点击、正常样式)

五、使用注意事项

        1. 执行时机:必须在福昕 PDF WebSDK 渲染完成、工具栏按钮加载到页面 DOM 后调用该函数,否则找不到按钮导致失效;
      1. 兼容性:适配福昕 PDF WebSDK 标准工具栏结构,无需修改 DOM 选择器,直接复用;
      2. 彻底禁用:不仅添加disabled属性,还拦截了所有点击 / 键盘事件,避免快捷键绕过限制;
      3. 重复调用:支持多次调用(禁用→启用→禁用循环切换),无事件绑定冗余问题。
免费获取SDK试用

相关内容

别再发一堆附件了!PDF文件包,一份文件搞定所有资料

身份证正反面如何合并到同一页PDF上并打印?

福昕 PDF「多套会议资料循环打印」教程

如何批量替换修改PDF中的多个文本?

如何在合并文件的同时调整页面大小?

如何在福昕高级pdf编辑器中折叠/隐藏上方搜索栏?

如何在 Foxit PDF 编辑器中如何更改测量值的比例?

PDF格式化页码在办公正式文档中的应用

福昕高级PDF编辑器功能区如何最小化或者一直保持可见状态

软件激活时提示您当前使用的是福昕永久版,但无法登录该如何处理

推荐内容

福昕 PDF SDK(Web):禁用 / 启用页面跳页按钮(首页 / 上一页 / 下一页 / 末页)

别再发一堆附件了!PDF文件包,一份文件搞定所有资料

身份证正反面如何合并到同一页PDF上并打印?

福昕 PDF「多套会议资料循环打印」教程

如何批量替换修改PDF中的多个文本?

如何在合并文件的同时调整页面大小?

如何在福昕高级pdf编辑器中折叠/隐藏上方搜索栏?

如何在 Foxit PDF 编辑器中如何更改测量值的比例?

PDF格式化页码在办公正式文档中的应用

福昕高级PDF编辑器功能区如何最小化或者一直保持可见状态

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2026 福建福昕软件开发股份有限公司 版权所有

隐私策略