Ionic 输入框

Ionic 输入是用于安全收集和处理用户输入的基本组件。它是 HTML 输入元素的包装器，包含自定义样式和附加功能。它的工作方式类似于 HTML 输入元素，但在桌面设备上效果很好，并且可以与移动设备上的键盘集成。

Ionic 输入仅接受文本类型输入，例如 "text"、"password"、"number"、"email"、"search"、"tel" 和 "URL"。它还支持所有标准文本类型输入事件，包括 key-up、key-press、key-down 等。

有许多可用的属性可用于设置输入字段的样式。这些列在下面。

• 固定内联标签
• 浮动标签
• 内联标签
• 占位符标签
• 堆叠标签

固定内联标签

它用于将标签放置在输入元素的左侧。输入文本时，标签不会隐藏。您还可以将占位符文本与固定标签结合使用。您可以使用以下语法在 <ion-label> 元素中添加 fixed 属性。

浮动标签

它们是当输入被选中时动画或浮动的标签。您可以使用以下语法在 <ion-label> 元素中添加浮动属性。

内联标签

如果 <ion-label> 没有任何属性，则称为内联标签。输入文本时，它不会隐藏。以下语法解释了内联标签。

占位符标签

占位符充当提示或标题的默认位置。当您在输入中输入文本时，占位符标签会自动隐藏。您可以使用以下语法在 <ion-label> 元素中添加占位符属性。

堆叠标签

这种类型的标签始终显示在输入的顶部。您可以将占位符文本与堆叠标签结合使用。您可以使用以下语法在 <ion-label> 元素中添加堆叠属性。

以下示例显示了 Ionic 框架中使用的不同类型的输入。

示例

输出

列表中的输入

以下示例帮助您了解如何将输入元素与列表组件一起使用。

示例

输出

多行文本输入

如果要编写多行文本输入，可以使用 <ion-textarea> 组件。此组件允许 Ionic 更好地处理 textarea 的用户体验和交互性。与原生文本区域元素不同，<ion-textarea> 不支持从内部内容加载其值。您可以在 value 属性中设置 textarea 值。

<ion-textarea> 组件除了 Ionic 属性之外，还接受所有原生 textarea 属性。

示例

以下示例显示了在 Ionic 应用程序中使用 <ion-textarea> 组件。

输出