Skip to content

自定义输入框占位文本

占位文本显示在输入框内部,字段为空时给出简短填写指引;开始输入后通常会消失。它和字段外侧的提示信息互补:占位偏「框内示例」,提示偏「旁白说明」。

占位文本效果

在哪里找

选中输入类组件 → 属性配置 → 占位文本(或 Placeholder)。

占位 vs 提示信息

占位文本提示信息(基础配置)
位置输入框内部字段旁说明
输入后通常消失仍可查看
适合短示例、格式暗示较长说明、注意事项

怎么用(分步)

  1. 填写简短占位,如「请输入手机号」。
  2. 需要动态文案时,改为从变量读取(若支持)。
  3. 预览查看空态是否清晰;有内容后再看是否仍靠标签能懂字段含义。

占位文本效果

业务示例

入门:邮箱格式提示

占位:name@example.com,减少格式错误;再加邮箱验证。

入门:日期范围暗示

日期占位「选择入职日期」;区间类写清「开始日期 — 结束日期」(以组件为准)。

常用:搜索框说明筛选范围

占位:「姓名 / 工号 / 手机号」→ 用户知道一个框可搜多种关键字。可开清除按钮

常用:多语言占位

占位从全局变量读取,随语言切换(需环境支持变量与多语言)。

注意点

  • 占位不要写成长段落,长说明放到提示信息。
  • 关键要求仍应用标签 + 校验表达,不能只靠占位(空了就看不见)。
  • 占位不是默认值;需要预填内容请配默认值或数据联动

相关阅读