如何在SharePoint List的多行文本框中实现字数统计功能

方案1：JSON 列格式化（仅视图页展示，操作门槛最低） #

• 适用场景：只需要在列表浏览视图里展示每条记录的多行文本字数，不需要在新建/编辑表单里实时统计
• 操作步骤：
  1. 找到目标多行文本列，点击列头下拉菜单 -> 选择「列设置」->「格式化此列」
  2. 将下方JSON代码粘贴到右侧编辑器，保存即可生效

  {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "txtContent": "@currentField"
      },
      {
        "elmType": "span",
        "style": {
          "font-size": "12px",
          "color": "#666",
          "margin-top": "4px",
          "display": "block"
        },
        "txtContent": "= '当前字数：' + length(@currentField)"
      }
    ]
  }
  

• 局限性：仅在列表视图页生效，新建、编辑表单页无法展示实时字数。

方案2：Power Apps 自定义表单（支持编辑页实时统计，无代码） #

• 适用场景：需要在新建、编辑表单中实时展示输入字数，甚至限制最大输入长度
• 操作步骤：
  1. 打开目标列表，点击「新建」按钮旁的下拉箭头 -> 选择「自定义表单」进入Power Apps编辑界面
  2. 在左侧控件树中找到目标多行文本框控件，记录默认控件名（一般为DataCardValueX，X为数字）
  3. 插入一个「标签」控件，放置在多行文本框下方，将标签的Text属性设置为以下公式：
     "已输入字数：" & Len(DataCardValueX.Text)
  4. 若需要限制最大输入字数，将多行文本框的MaxLength属性设置为你需要的数值即可
  5. 点击右上角「发布到 SharePoint」，配置生效
• 优势：全程无代码操作，不需要额外权限，所有配置都在SharePoint生态内完成，编辑、新建场景下都能实时更新字数统计。

方案3：SPFx 扩展开发（适合复杂定制需求） #

• 适用场景：需要特殊统计逻辑（比如排除空格、特殊字符、统计单词数），或者要和其他业务逻辑联动的场景，需要基础前端开发能力
• 核心实现逻辑：
  1. 创建SPFx Field Customizer扩展，绑定到目标多行文本列
  2. 在扩展逻辑中监听文本框输入事件，自行实现统计规则，核心代码示例：

  // 绑定目标多行文本框
  const targetTextarea = document.querySelector('textarea[data-field-name="你的列内部名称"]');
  // 生成字数提示元素
  const countTip = document.createElement('span');
  countTip.style.cssText = 'font-size: 12px; color: #888; margin-top: 4px; display: block;';
  targetTextarea.parentNode.appendChild(countTip);
  
  // 监听输入事件实时更新统计
  targetTextarea.addEventListener('input', () => {
    // 如需排除空格和换行统计，可替换为 targetTextarea.value.replace(/\s/g, '').length
    const currentLength = targetTextarea.value.length;
    countTip.innerText = `已输入 ${currentLength} 字`;
  });
  

  3. 打包部署SPFx包到租户应用目录，激活到目标站点即可生效。

新手建议优先选择前两个方案，操作简单不需要开发基础，可覆盖绝大多数常规字数统计需求。

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