contenteditable div-以跨度包装文本并设置其样式，而不会影响新添加的文本

Question

我正在使用Angular 6创建标签组件。在我的组件中，用户将添加一串用逗号分隔的字符串，当它们模糊了输入内容时，标签将被跨距包裹起来，这样我就可以为<span class="item"> tag </span>设置样式。

当用户将焦点放在输入之外时，逗号也应隐藏。为此，在模糊时，我将逗号包裹在另一个跨度<span class="comma">,</span>中以对其进行样式设置。

所以我在想的是简单地为“逗号”类设置样式：

.comma {
 opacity: 0;
}

此问题是，无论我在提交的逗号（由逗号分隔的文字）之后键入的文本，都将应用opacity:0，直到我将焦点移到输入之外并且标签的文字被包裹文字周围。

这是组件所期望的：

1. 用户将添加几个用逗号分隔的标签
2. 当用户集中注意力时，所有标签将被样式化的跨度包裹，并且逗号将被隐藏。
3. 用户可以在提交的标签的末尾添加用逗号分隔的新字符串，并可以集中精力提交新标签。

这是一个小提琴，我没有隐藏逗号，而是为它上色，以便您可以看到新添加的文本也将具有与逗号相同的样式： https://jsfiddle.net/daek1sgz/3/

要重新创建：

1. 在tag2之后添加一个逗号（，），并将焦点放在输入框中。
2. 观察标记和逗号的样式
3. 再次关注输入，并在最后一个逗号后键入文本。
4. 观察到文本背景为粉红色，与逗号相同。

预期结果： 新文本没有任何样式。

我该如何解决？

Answer 1

当我们集中精力时，您可以使用javascript split（'，'）方法将字符串转换为数组。然后，您可以使用* ngFor指令在SPAN标签中显示数组项。

用户输入：

比方说，用户输入xx，yy，zz作为“文本”字段的输入。在（模糊）事件中，您可以读取输入值并将其转换为数组。

组件： ----------- const tags = input.split(',');
                                                                                     现在，您可以在模板文件中使用此标签属性，并使用* ngFor结构化指令进行显示。

模板： --------- <div *ngFor="let item of tags" ><span>{{item}}</span></div>