SuperAPI AI 工具集

textarea

前端与建站

查看项目

更新于 10-16 05:25

技能介绍

用途

Textarea 模式用于实现多行文本输入,适合收集较长的自由文本内容。它的目标是让团队在收集长文本时,仍能对长度、填写引导和校验保持可控。资料指出,该模式在需要评论与支持备注时最为有用。

主要能力

该模式帮助团队以可靠方式收集较长的自由文本,同时让长度限制、引导信息和校验保持可管理。相比相邻模式,它应当减少填写摩擦,而不隐藏用户继续操作所需的状态、规则或恢复路径。

使用方式

资料给出的实现工作流如下:

  1. 在复制示例之前,先确认该模式与问题和约束相匹配。
  2. 从 references/pattern.md 中的结构与示例开始,然后选择最小可行的变体。
  3. 在叠加视觉打磨之前,先应用无障碍、性能和交互护栏。
  4. 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。

适用场景

资料明确列出以下适用场景:

  • 评论与支持备注
  • 描述与个人简介
  • 问题报告与反馈

不适用场景

资料明确列出以下应避免的情况:

  • 当值是二元的、极小的或完全受限时,应使用更简单的原生控件。
  • 当原生浏览器输入已经能很好地解决主要任务时,避免自定义行为。
  • 如果产品无法从中受益,不要添加额外的格式化或校验。

无障碍护栏

键盘交互

  • 验证 textarea 可以仅用键盘完成填写。
  • 当模式打开、更新或显示额外 UI 时,保持焦点顺序合乎逻辑。
  • 保持可见的焦点状态,并在高缩放级别下仍然可读。

屏幕阅读器支持

  • 优先使用语义元素,仅在语义本身不足时添加 ARIA。
  • 在正确的位置、以正确的礼貌程度播报错误、加载或完成等状态变化。
  • 在有用时,用 aria-describedby 或结构化标题连接标签、提示和状态文本。

视觉无障碍

  • 不要仅依赖颜色来传达严重程度、完成状态或选中状态。

常见错误

校验时机错误

问题:对部分输入立即校验会让模式显得苛刻且嘈杂。

修复:等到用户在字段中有足够信息后再校验,根据规则风险选择在失焦、暂停或提交时校验。

标签、提示和错误分离

问题:当文案在视觉上分离时,人们无法判断哪条消息属于哪个控件。

修复:将标签、辅助文本和校验消息紧密分组,并在适当处用 aria-describedby 连接。

忘记触摸和自动填充行为

问题:仅桌面端的样式会掩盖移动键盘、自动填充和粘贴流程行为不同的事实。

修复:在宣布模式完成之前,用自动填充、粘贴、缩放和屏幕键盘测试该控件。

相关模式

  • https://uxpatterns.dev/patterns/forms/form-validation
  • https://uxpatterns.dev/patterns/forms/rich-text-editor
  • https://uxpatterns.dev/patterns/forms/text-field

更多信息

完整实现细节、示例和测试说明,请参见 references/pattern.md。

模式页面:https://uxpatterns.dev/patterns/forms/textarea