如何在Shopify Schema的textarea或richtext元素中添加字数限制选项？

Textarea 元素的原生字数限制 #

Shopify Schema 里的 textarea 字段自带字数限制功能，直接添加 limit 属性即可，属性值就是你要限制的最大字符数：

{
  "type": "textarea",
  "id": "note1",
  "label": "自定义备注I",
  "default": "给这个世界最需要的人一份小甜饼。",
  "limit": 100 // 最大允许输入100个字符
}

• 后台编辑器会自动截断超出限制的内容，同时给用户显示字数上限提示
• 这个 limit 属性仅对 textarea 类型字段生效

Richtext 元素的字数限制（需自定义实现） #

Shopify Schema 的 richtext 类型不原生支持 limit 属性，需要通过自定义前端代码实现字数限制逻辑：

实现步骤： #

找到渲染 richtext 编辑器的页面元素，用 JavaScript 监听输入事件，实时计算字符数并截断超出部分。

示例代码（添加到主题对应的模板脚本中）：

// 替换为你的richtext编辑器对应的选择器
const richtextEl = document.querySelector('#your-richtext-id [contenteditable="true"]');
const maxChars = 200; // 自定义最大字数

richtextEl.addEventListener('input', () => {
  const currentChars = richtextEl.textContent.length;
  if (currentChars > maxChars) {
    richtextEl.textContent = richtextEl.textContent.slice(0, maxChars);
    // 可选：添加用户提示，比如显示剩余字数
    alert(`已达最大字数限制：${maxChars}`);
  }
});

• 上述代码计算的是纯文本字符数，如果需要包含HTML标签的字符数，将 textContent 替换为 innerHTML 即可
• 注意选择器要对应你后台设置的 richtext 字段ID，否则无法找到目标元素

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