语义-UI | 占位符

占位符是指在表单等输入框中显示的提示性文本，用于告诉用户应该输入什么内容。在语义-UI中，占位符可以通过<Form.Input>组件添加。

基本用法

<Form.Input>组件可以通过添加placeholder属性来设置占位符。例如：

<Form.Input placeholder='请输入用户名' />

此时，输入框中会显示“请输入用户名”。

自定义样式

可以通过CSS来自定义占位符的样式。语义-UI中占位符的样式都在.ui.input > input::-webkit-input-placeholder中定义，例如：

.ui.input > input::-webkit-input-placeholder {
  color: gray;
}

这会将占位符的颜色改为灰色。

占位符内容变化

占位符的内容可以在输入框中的文本发生变化时，由用户输入值替代。这个功能在语义-UI中是默认开启的。如果需要禁用，可以通过将placeholder属性设置为空字符串来实现：

<Form.Input placeholder='' />

非输入框组件中的占位符

语义-UI还提供了一些非输入框组件中可以使用的占位符，例如<Form.Select>和<Form.TextArea>组件。这些组件的占位符同样可以通过placeholder属性进行设置。

<Form.Select placeholder='请选择'>
  <option value='1'>选项1</option>
  <option value='2'>选项2</option>
  <option value='3'>选项3</option>
</Form.Select>

<Form.TextArea placeholder='请输入评论...' />

以上就是语义-UI中占位符的基本用法和自定义方式。