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

Question

我正在使用Flex，我有一个文本区域，当我输入一些文本并点击键盘上的 Space 或 Enter 按钮时，我想要它使用X标记创建一些设计，与Stack Overflow标记部分完全相同。

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

请帮我说明如何进行此类文本框或文本区域。

Answer 1

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

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

最初，容器只有一个子节点TextInput，其大小为容器宽度的100％。 TextInput有一个键盘事件监听器，用于检测用户何时按 Space 或 Enter 以“提交”地址并将其转换为“tag”对象。

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

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

“tag”对象具有“x”图标的事件侦听器，单击该图标会导致从容器中删除标记。

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