Skip to content

自定义输入框占位文本 ​

占位文本显示在输入框内部:字段为空时给出简短填写指引,开始输入后通常会消失。界面属性名多为 输入框占位文本(日期等组件可能叫「非范围选择时的占位内容」等,以面板为准)。

它和字段外侧的提示信息互补:占位偏「框内示例」,提示偏「旁白说明」。

在哪里找 ​

选中输入类组件 → 右侧 组件配置 → 属性配置 → 输入框占位文本。

占位 vs 提示信息 ​

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

提示信息在基础配置;占位在属性配置。长说明请放提示信息,不要塞进占位。

提示信息在基础配置

怎么用(分步) ​

下面以访客登记的「姓名」为例。

  1. 选中字段,滚到 属性配置,找到 输入框占位文本。

找到输入框占位文本

  1. 写成简短指引,例如「请输入访客姓名」。

填写占位文案

  1. 看画布空态:框内应出现灰色占位。

画布空态可见占位

  1. 需要随语言或变量变化时,点 数据绑定,把占位接到变量 / $t(详见数据绑定)。

动态占位走数据绑定

  1. 点 预览,确认空态占位清晰;输入内容后占位应消失,字段含义仍靠标签能看懂。

预览空态占位

推荐顺序

先写清标签 → 再配短占位 → 长说明放提示信息 → 格式约束靠验证配置。

场景示例 ​

入门:访客姓名填写指引 ​

背景:访客登记「姓名」要提示怎么填,又不想占提示信息那一栏。

步骤:

  1. 选中「姓名」,把 输入框占位文本 写成「请输入访客姓名」。

场景:姓名占位

预期:空态框内可见指引;这不是默认值,提交时不会把占位当作用户输入。

常用:手机号格式暗示 ​

背景:手机号希望用户一眼看出要填 11 位,严格校验仍靠验证规则。

步骤:

  1. 选中「手机号」,占位写成「请输入11位手机号」。

场景:手机号占位配置

  1. 看画布空态是否出现该占位。

场景:画布手机号占位

预期:占位只作暗示;必填与格式请配验证配置。

常用:日期选择占位 ​

背景:来访日期是日期组件,面板文案可能是 非范围选择时的占位内容(范围选择另有开始/结束占位)。

步骤:

  1. 选中日期字段,找到对应占位项,写成「请选择来访日期」。

场景:日期占位

预期:空态显示选择指引。区间日期分别配置开始/结束占位(以面板为准)。

常用:多语言 / 变量驱动占位 ​

占位不要写死时,用数据绑定接到全局变量或国际化词条 $t。配置入口见上文「怎么用」第 4 步。

注意点 ​

  • 占位不要写成长段落,长说明放到提示信息。
  • 关键要求仍应用标签 + 校验表达,不能只靠占位(空了就看不见)。
  • 占位不是默认值;需要预填内容请配默认值或数据联动。
  • 不同组件占位项文案可能不同(输入框 / 日期 / 搜索框),以当前面板为准。

相关阅读 ​