使用 Flex 在文本区域上输入或删除标签

Question

我正在使用 Flex，我有一个文本区域，当我输入一些文本并点击键盘上的 Space 或 Enter 按钮时，我想要它创建一些带有X 标记的设计，就像堆栈溢出标签部分一样。

如果我输入“Flex”并按空格或回车，它将添加Flex X。然后如果我点击十字标记（X），“Flex”将从标签文本框中删除。

请帮助我如何处理这种类型的文本框或文本区域。

Answer 1

这样做并非易事。这是我几年前在电子邮件客户端上使用的方法。

创建一个自定义“容器”类，该类扩展 Group (Flex 4) 或 UIComponent (Flex 3)。此容器将有两种类型的子对象：TextInput 和另一个表示标签或电子邮件地址的对象。

最初容器只有一个子元素，TextInput，其大小为容器宽度的 100%。 TextInput 有一个键盘事件监听器来检测用户何时按下 Space 或 Enter 来“提交”地址并将其转换为“标记”对象。

当文本被“提交”时，你：

• 删除输入到文本输入中的文本。
• 根据输入的文本创建“标签”并将其添加到容器中。将其添加到容器中时，将其添加到文本输入的前面。
• 调整文本输入的大小，使其现在占据容器的剩余宽度。如果当前行的文本输入空间不足，则将文本输入放置在下一行的下方并再次使其宽度为 100%。

“tag”对象有一个“x”图标的事件监听器，当点击它时会导致标签从容器中移除。

在 Flex 4 中，您的容器类可以是 Group，并且子文本输入和标记对象的所有大小/定位都可以通过自定义 Spark 布局来完成。如果您在 Flex 3 中执行此操作，那么大小/定位逻辑将是容器逻辑的一部分。在这两种情况下，您都应该使用适当的 Flex 生命周期方法来调整容器的子对象的大小/位置。