{ "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。", "schemaVersion": "1.0.0", "kind": "entry", "locale": "zh-CN", "id": "character-counter", "name": { "zh": "字数统计", "en": "Character Counter" }, "page": "https://designvocabulary.com/zh/entries/character-counter/", "self": "https://designvocabulary.com/zh/entries/character-counter.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/character-counter.json", "en": "https://designvocabulary.com/en/entries/character-counter.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/zh/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=zh", "guide": "https://designvocabulary.com/zh/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。", "sources": [ { "id": "charcount-govuk", "url": "https://design-system.service.gov.uk/components/character-count/", "title": "GOV.UK Design System · Character count", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://design-system.service.gov.uk/components/character-count/" } }, { "id": "charcount-carbon", "url": "https://carbondesignsystem.com/components/text-input/usage/", "title": "Carbon Design System · Text input usage (Character counter modifier)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/text-input/usage/" } }, { "id": "charcount-material-web", "url": "https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "title": "Material Web · Text field (docs/components/text-field.md)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/text-field.md" } } ], "lists": [], "ordered": false, "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。" }, "entry": { "id": "character-counter", "type": "micro", "name": { "zh": "字数统计", "en": "Character Counter" }, "aliases": [ "Character Count", "Word Count", "字符计数", "剩余字数" ], "granularity": "state", "intents": [ "inform", "prevent-error" ], "tags": [ "字数", "字符限制", "表单", "输入框", "实时反馈" ], "definition": "在有长度上限的输入框旁持续显示当前已输入多少、还剩多少（如“120/280”或“还可输入 40 字”），随着输入实时更新，并在接近或超过上限时改变样式或措辞。", "boundary": "字数统计只回答“写了多少、还能写多少”这一个问题，它是一种持续的预告，而不是错误提示：用户还没犯错时它就在场。它与行内校验相邻但不同——行内校验在输入不合规后指出错误并说明怎么改，字数统计在越界之前就把余量摆出来；一旦超出上限，超限的那一刻才轮到校验信息接手。它也不是一个随意的装饰：没有真实长度上限的字段不需要它，而如果用户频繁碰到上限，该改的通常是上限本身。各设计系统在“到达上限后是否阻止继续输入”上做法不同，这是本词条最需要做出的选择。", "signature": [ "输入框附近有一个随输入实时变化的数字，通常是“已用/上限”或“剩余”", "接近或超过上限时数字的颜色、图标或措辞随之改变", "上限本身在用户开始输入前就可见或可被读出" ], "when": [ "字段有真实的长度上限，例如短信、简介、发布到外部平台的文案", "用户需要边写边权衡措辞，余量本身就是写作的约束", "超限后的内容会被截断或拒绝，事先告知比事后报错更省力" ], "when_not": [ "字段没有业务上必需的上限，只是为了界面整齐而加了计数", "用户经常撞到上限——此时应先考虑放宽上限", "到达上限时静默截断粘贴进来的内容，而用户看不到被丢掉了什么" ], "tradeoff": "实时计数把隐形的限制变成可见的余量，让用户在写作中就能调整，而不是提交后才被拒绝；代价是它持续占据注意力，可能让人为数字而写；而“到上限即阻止输入”虽然从根本上杜绝越界，却会让粘贴的长文被悄悄截断，“允许超出再提示”则保留了全文但需要配合清楚的错误信息。", "comparison": { "focus": "在越界之前让用户看见还剩多少余量", "mechanism": "输入框旁随输入实时更新的计数，接近或超过上限时改变样式与措辞", "cost": "持续占用注意力，且必须在“阻止超出”与“允许超出再提示”之间做出取舍" }, "sources": [ { "id": "charcount-govuk", "title": "GOV.UK Design System · Character count", "url": "https://design-system.service.gov.uk/components/character-count/", "claim": "该组件指南建议只在确有理由限制字数时使用字符计数；若用户经常撞到后端上限，应尽量提高上限而不是加计数。组件允许输入超过上限，并告知用户已超出多少，使其可以先粘贴完整答案再删减；可设置在达到上限一定比例后才显示计数，也可改为按词计数。指南记录了 2017 年对 17 名用户（含数字技能较低者与残障用户）的测试，以及读屏软件播报与表情符号等字符计数的已知问题。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://design-system.service.gov.uk/components/character-count/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:47.541Z", "error": "save-request-failed" } }, { "id": "charcount-carbon", "title": "Carbon Design System · Text input usage (Character counter modifier)", "url": "https://carbondesignsystem.com/components/text-input/usage/", "claim": "该使用指南把字符计数描述为文本域的可选部件，用于显示已输入字符数与允许的总字符数，并规定达到上限后文本域应阻止继续输入、同时给出已达上限的提示。本词条用它作为与 GOV.UK“允许超出再提示”相对照的另一种做法。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/text-input/usage/", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:49.644Z", "error": "save-request-failed" } }, { "id": "charcount-material-web", "title": "Material Web · Text field (docs/components/text-field.md)", "url": "https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "claim": "Material Design 官方 Web 组件库的文本框文档说明，带有 maxlength 属性的文本框会显示字符计数器；maxLength 属性表示用户可输入的最大字符数。本词条据此说明在 Material 体系里计数器随长度上限一同出现。", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://github.com/material-components/material-web/blob/main/docs/components/text-field.md", "status": "unconfirmed", "checkedAt": "2026-10-20T07:58:50.343Z", "error": "save-request-failed" } } ], "relations": [ { "target": "inline-validation", "kind": "composes_with", "condition": "用户的输入超过了长度上限", "reason": "字数统计在越界前预告余量，越界后由行内校验在字段旁说明问题和改法；二者分工，不应让计数数字变红就算是错误提示。", "basis": "editorial" }, { "target": "error-prevention", "kind": "related", "condition": "超长内容会在提交时被拒绝或截断", "reason": "提前展示余量让用户在出错之前就调整，是错误预防在单个字段上的一种体现。", "basis": "editorial" }, { "target": "status-message", "kind": "composes_with", "condition": "读屏用户需要知道余量的变化", "reason": "计数的更新需要以不打断输入的方式播报，例如在用户停止输入后再读出，而不是每次击键都播报。", "basis": "editorial" }, { "target": "determinate-progress", "kind": "related", "condition": "计数以进度条或圆环的形式呈现", "reason": "两者都显示“已完成多少、总量多少”，但确定进度描述系统任务，字数统计描述用户自己的输入余量，满格不是目标而是边界。", "basis": "editorial" } ], "rules": [ { "when": "为字段显示字数统计", "instruction": "让上限在用户开始输入前就可见或可被读屏读出，而不是只在接近上限时才出现。", "strength": "recommend", "basis": "editorial" }, { "when": "到达或超过上限", "instruction": "不要静默截断用户粘贴或输入的内容；若选择阻止继续输入，须明确告知已达上限，若允许超出，须说明超出多少并在提交时给出错误信息。", "strength": "recommend", "basis": "editorial" }, { "when": "用超限样式（如变红）提示", "instruction": "同时改变文字措辞或图标，不只依赖颜色传达已超出上限。", "strength": "must", "basis": "editorial" } ], "behavior": { "states": [ "idle", "typing", "near-limit", "at-limit", "over-limit" ], "a11y": [ "计数与输入框通过描述关系关联，读屏用户在聚焦时能听到上限", "余量变化在用户停止输入后再播报，避免每次击键打断", "超限状态以文字说明，不只靠颜色" ], "motion": "数字随输入即时更新，不做滚动或跳动动画；减弱动态偏好下状态变化保持瞬时" }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "本词条尚无可操作示例；插画为编辑示意，其中的输入内容以占位条表示。应用到产品前仍须用读屏软件确认上限与余量的播报时机，检查粘贴超长内容时的处理，并确认表情符号与非拉丁字符的计数方式符合后端的实际限制。", "image": { "src": "/images/character-counter.webp", "alt": "一张对照示意图：虚构的 FIELDNOTES 表单中并排两个多行输入框，内容均以灰色占位条表示；左侧输入框右下角有一个石板蓝的小计数标签（以短占位条代替数字），上方一条细进度线只填了大半；右侧输入框的占位条已超出边界，计数标签改为赤陶色并带一个警示图标，输入框边框也变为赤陶色。" }, "searchTerms": [ "word count", "character limit", "form", "text field", "live feedback" ] } }