contenteditable div - 在 span 中换行并设置样式而不影响新添加的文本

Question

我正在使用 Angular 6 制作一个标签组件。在我的组件中，用户将添加一堆用逗号分隔的字符串，当它们模糊输入时，标签将被一个跨度包裹，这样我就可以样式它<span class="item"> tag </span>。

当用户关注输入时，逗号也应该被隐藏。为此，在模糊时，我将逗号包裹在另一个跨度 <span class="comma">,</span> 中以便能够对其进行样式设置。

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

.comma {
 opacity: 0;
}

这样做的问题是，无论我在提交的逗号之后输入的任何文本（由逗号跨度包裹的文本）也将应用 opacity:0，直到我将注意力从输入中移出并且标签跨度被包裹在文本。

这就是组件所期望的全部内容：

1. 用户将添加多个用逗号分隔的标签
2. 当用户聚焦时，所有标签都会被一个样式化的 span 包裹起来，逗号会被隐藏。
3. 用户可以在提交的标签末尾添加以逗号分隔的新字符串，并可以专注于提交新标签。

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

重新创建：

1. 在tag2后加逗号（,），焦点移出输入框。
2. 观察标签和逗号现在的样式
3. 再次关注输入并在最后一个逗号后键入文本。
4. 观察文本背景为粉红色，与逗号相同。

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

我该如何解决这个问题？

Answer 1

当我们重点关注时，您可以使用 javascript split(',') 方法将字符串转换为数组。然后，您可以使用 *ngFor 指令来显示 SPAN 标签内的数组项。

用户输入：

假设用户输入 xx,yy,zz 作为文本字段的输入。在 (blur) 事件中，您可以读取输入值并转换为数组。

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

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