文本区域输入

InputTextarea 向标准文本区域元素添加样式和自动调整大小功能。

导入#


import { InputTextarea } from 'primereact/inputtextarea';

基本#

文本区域用作具有 value 和 onChange 属性的受控输入。


<InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />

自动调整大小#

当启用 autoResize 时，文本区域会增长而不是显示滚动条。


<InputTextarea autoResize value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />

按键过滤器#

InputTextarea 具有内置的按键过滤支持以阻止某些按键，有关详细信息，请参阅按键过滤器页面。


<InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30} />

浮动标签#

当聚焦时，浮动标签会出现在输入字段的顶部。有关详细信息，请访问浮动标签文档。

描述


<FloatLabel>
    <InputTextarea id="username" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
    <label htmlFor="username">Username</label>
</FloatLabel>

已填充#

将 variant 属性指定为 filled 以显示具有比默认 outlined 样式更高视觉强调的组件。


<InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />

无效#

无效状态使用 invalid 道具显示以指示验证失败。在与表单验证库集成时，可以使用此样式。


<InputTextarea invalid rows={5} cols={30} />

已禁用#

当存在 disabled 时，元素无法被编辑和聚焦。


<InputTextarea disabled rows={5} cols={30} />

可访问性#

屏幕阅读器

InputTextarea 组件呈现一个原生文本区域元素，该元素隐式包含任何传递的道具。描述组件的值可以通过与 id 道具组合的 label 标签提供，也可以使用 aria-labelledby, aria-label 道具。


<label htmlFor="address1">Address 1</label>
<InputTextarea id="address1" />

<span id="address2">Address 2</span>
<InputTextarea aria-labelledby="address2" />

<InputTextarea aria-label="Address Details"/>

键盘支持

按键	功能
tab	将焦点移动到输入。