标签输入框怎么设计？去重、删除与数量上限

标签输入框要把“正在输入的文字”和“已经加入的标签”分开。确认添加时先去掉无意义的首尾空白，再按业务规则判断重复和数量上限；失败时保留文字并说明原因。删除要有明确入口，删除后焦点仍留在标签组或输入位置，不能让用户重新寻找刚才的操作区域。

以发布《门店陈列手册》为例，资料最多填写 5 个标签，已有“运营、门店、陈列”。接下来输入“培训”、再次输入“门店”和删除“陈列”，会走向三个不同结果。用 交互原型制作工具把这些操作接起来，可以在提交开发前看清提示出现在哪里、哪段文字会保留，以及下一次输入从哪里开始。

先确定这是填写标签，而不是切换页面

文章分类标签、筛选条件和标签输入框都可能长得像几枚小胶囊，但点击后的含义不同。文章详情里的“运营”可能进入分类页，列表顶部的“运营”可能筛选数据；在本例资料发布表单里，它表示这份资料已经带上“运营”标签，旁边的叉号只负责移除这个标签。

因此不要给同一标签同时塞进跳转、选中和删除三种意图。阅读标签文字不应意外离开尚未提交的表单；点击叉号也不应打开分类页面。标签栏里的 Tab 又是另一回事，它负责在内容面板间切换，不能因为中文都叫“标签”就照搬状态和键盘操作。

本例允许编辑人员创建新词，也能选择已有词；如果业务只允许使用统一词库，就把“新增标签”改为“搜索并选择标签”，没有匹配项时不展示创建入口。这会直接影响空状态文案、重复判断和提交数据。先写清谁能创建新词，比先挑五种标签颜色更重要。

一段文字怎样变成一枚标签

字段名称保留“资料标签”，下面用一句短说明交代“最多 5 个，输入后按回车添加”。用户输入“培训”时，它仍是临时文字；按回车或点明确的“添加”后，只有通过长度、重复和数量规则，才成为一枚可移除的标签，计数从 3/5 变为 4/5，输入区清空并继续接收下一词。

不要在失去焦点时一律清空未确认文字。编辑人员输入到“新员工”，转去看资料标题，回来却发现内容不见了，会以为系统已经自动保存。可以选择失焦自动确认，也可以保留未确认文字等待添加，但两种方案都要一致。本例采用显式添加：失焦保留文字；提交整份资料时，若仍有未添加的文字，就提示先添加或清除，避免静默遗漏。

中文输入时，按回车可能只是确认输入法候选，并不表示添加标签。设计状态中要留出“正在组词”和“文字已确认”两步，不让一次回车既结束组词又误触发表单提交。也不要把空格一概当成分隔符，“门店 运营”可能是一个内部命名；分隔规则应适合本业务，而不是直接照搬英文标签演示。

粘贴多项时更要说明怎样拆分。本例允许用中文或英文逗号分隔，一次粘贴“门店，培训，陈列”时，先列出识别到的三个词，再沿用同一去重与名额规则。包含英文逗号的正式词名若需要作为一个标签，则应提供单项添加方式，而不是让用户猜如何转义。

重复判断要说明什么被当成同一个词

用户再次输入“ 门店 ”时，本例去掉首尾空白后发现“门店”已经存在，于是保持原有 3 个标签，并在输入区附近提示“已添加‘门店’，未重复加入”。可以短暂强调已有的“门店”标签帮助定位，但不要新增第二枚再马上删除，也不要用一条没有对象的“操作失败”。

大小写是否等价，需要由词库规则确定。英文缩写“UI”和“ui”通常适合归一到同一个词条，但如果标签承载产品代码或区分大小写的标识，就不能自动合并。显示名称和后台标识也应分开：词库中的同一标签即使改名，仍应根据稳定标识判断已选，避免更名后出现两枚看似不同、实际相同的标签。

中文同义词不宜靠输入框擅自替换。“陈列”和“展示”在这家知识库里是否是同义词，需要内容管理规则；“门店”和“店铺”也可能分别用于线下与线上。发现相近已有词，可以建议选择，但不要在用户确认后偷偷换成另一个词。去重负责阻止确定的重复，词库治理负责决定同义关系，两者不要混为一个黑箱。

第六个标签不能凭空消失

当资料已经拥有“运营、门店、陈列、培训、上新”5 个标签时，显示“5/5”及“最多添加 5 个”。此时可以停止打开无意义的推荐列表，但仍要允许查看和删除已有项；不能把整个区域变灰锁死，让用户知道超额却没有调整入口。

如果用户在达到上限的同时还输入了“季度”，保留这段临时文字，并说明“已添加 5 个标签，移除一项后可添加‘季度’”。当他删除“上新”后，计数变成 4/5，待添加的“季度”仍在输入框中，用户可以继续确认。不要自动拿第一个标签或最后一个标签给新词腾位置，这相当于替用户改变资料分类。

批量粘贴会同时触发重复和超额。假设已有 3 个标签，又粘贴“门店，培训，上新，季度”，其中门店重复，剩下 3 个新词却只有 2 个名额。本例先显示待加入项与剩余名额，让用户取消一项再确认；若产品选择按顺序加入前两项，也必须列出“已加入什么、哪项未加入”，不能只提示“部分成功”而让用户自己比对。

长度限制与数量限制也要分开。一个很长的标签不能因为计数仍是 1/5 就无限撑开表单；需要限制时先定义按可见字符、字节还是后端规则计算，并在前后端保持一致。超过长度时保留原词和明确上限，不把它截成另一段可能改变意思的名称后直接保存。

移除一项后，下一步仍要找得到

叉号应有与具体标签对应的可访问名称，例如“移除陈列”，而不是所有按钮都叫“关闭”。标签本身可以获得键盘焦点，删除动作也要有清楚的操作方式；React Aria 的 TagGroup 文档把导航、选择和移除分别处理，适合用来提醒团队：一枚可见的标签还包含需要交付的操作行为。

用鼠标删除“陈列”后，输入区域应继续可用；用键盘删除时，可以把焦点移到相邻标签，最后一项删完再回到输入框。选择哪种相邻规则不必全行业统一，但同一个页面应稳定，不能有时跳上一项，有时落回页面标题。删除结果还应被辅助技术感知，而不只是让胶囊从视觉上消失。

输入区为空时，按退格直接删最后一枚标签容易误删。本例可以先让最后一枚获得明显焦点，再通过下一次删除动作移除，或者要求使用独立删除键；输入区里还有文字时，退格首先编辑文字。不要为了实现标签快捷操作，破坏用户熟悉的光标移动、选择文字和撤销习惯。

如果移除的只是当前未提交表单的一项，不必每次都弹出确认框。删除整个共享词库条目则是另一种高影响操作，不应藏在单枚标签的叉号里。这里的“移除陈列”只代表这份手册不再关联该标签，不代表所有其他资料也失去“陈列”。

把新增、重复和满额放回资料发布流程

在 Pixso 里画一张《门店陈列手册》的资料发布卡片，保留标题、标签区和“发布资料”按钮。围绕这一个对象连接三条短路径：新增“培训”后计数变为 4/5；重复输入“门店”后仍为 3/5；已有 5 个时输入“季度”，文字留下，删除“上新”后再添加。每条路径都应让人看见输入内容和最终标签有什么变化。

不要在每个画板换一套资料名称和标签，否则评审只能比较外观，很难追踪数据。可以把当前组和下一组并排，使用少量明确的连接说明“添加培训”“门店重复”“移除上新”，让同事尝试指出每一步后焦点在哪里。这里需要讨论的是应用的交互方案，不是要求画布替业务系统自动执行去重。

手机画板也要保留同一组标签。空间不足时让标签自然换行，输入位置接在末尾但不要被挤成只能显示一个字；较长词可以换行或提供完整名称查看，删除按钮仍需容易点到。只显示“+3”虽然省空间，却可能把用户需要删除的项目藏起来，编辑状态应有明确展开方法。

最后检查提交边界：新增词是否真正确认、词库中的已选项是否仍可用、未加入文字是否已经提示处理。若整张资料表单还有必填项、联动字段和提交失败，可参考 B端表单的字段与提交校验方法把错误落到对应位置，并保留其他正确输入。标签区最终交付的应是读者确认过的一组词，不能是恰好留在屏幕上的几枚胶囊。