如何通过Office JS Add-in在特定时段限制用户输入邮件正文？

核心思路 #

直接设置正文只读在部分场景下可能因Outlook的编辑模式限制不生效，改用拦截键盘输入事件+禁用右键菜单的方式实现输入限制，同时在Add-in面板显示等待提示，时段结束后自动恢复输入权限。

实现步骤与代码 #

1. 任务窗格HTML（显示等待提示）

在Add-in的任务窗格页面（比如taskpane.html）中添加提示元素：

<div id="waitPrompt" style="display: none; padding: 20px; text-align: center; font-size: 16px; color: #666;">
  <p>Please wait...</p>
</div>

2. Office JS核心逻辑（拦截输入+定时恢复）

在任务窗格的JS文件（比如taskpane.js）中编写以下代码：

Office.onReady(async () => {
  // 定义限制时长（示例：30秒）
  const restrictionDuration = 30000;

  // 显示等待提示
  document.getElementById('waitPrompt').style.display = 'block';

  // 获取邮件正文编辑器对象
  const body = Office.context.mailbox.item.body;

  // 拦截键盘输入事件
  function interceptKeydown(e) {
    // 允许Ctrl+C/V等系统快捷键，可根据需求调整
    if (e.ctrlKey || e.metaKey) return;
    // 阻止其他所有键盘输入
    e.preventDefault();
    e.stopPropagation();
  }

  // 禁用右键菜单
  function disableContextMenu(e) {
    e.preventDefault();
  }

  // 为正文编辑器添加事件监听
  async function attachEventListeners() {
    // 获取正文的DOM元素（需切换到HTML模式访问）
    await body.getAsync(Office.CoercionType.Html, async (result) => {
      if (result.status === Office.AsyncResultStatus.Succeeded) {
        const editorElement = document.querySelector('[contenteditable="true"]');
        if (editorElement) {
          editorElement.addEventListener('keydown', interceptKeydown);
          editorElement.addEventListener('contextmenu', disableContextMenu);
          // 额外拦截粘贴事件
          editorElement.addEventListener('paste', (e) => e.preventDefault());
        }
      }
    });
  }

  // 移除事件监听，恢复输入权限
  function removeEventListeners() {
    const editorElement = document.querySelector('[contenteditable="true"]');
    if (editorElement) {
      editorElement.removeEventListener('keydown', interceptKeydown);
      editorElement.removeEventListener('contextmenu', disableContextMenu);
      editorElement.removeEventListener('paste', (e) => e.preventDefault());
    }
    // 隐藏等待提示
    document.getElementById('waitPrompt').style.display = 'none';
  }

  // 执行拦截逻辑
  await attachEventListeners();

  // 定时解除限制
  setTimeout(removeEventListeners, restrictionDuration);
});

关键说明 #

• 事件拦截范围：代码中拦截了键盘输入、右键菜单和粘贴操作，可根据需求调整（比如允许某些快捷键）。
• DOM元素获取：Outlook邮件正文是contenteditable元素，通过选择器[contenteditable="true"]定位，需确保在正文加载完成后执行监听。
• 兼容性：该方案适用于Outlook桌面端和网页端，若遇到元素选择失败的情况，可尝试延迟执行attachEventListeners函数。

内容的提问来源于stack exchange，提问作者Soham Nale