使用输入创建标签

Question

我有一个用于编写标签的输入。我的问题是我想在输入中输入标签的任何名称，然后按Enter或单击按钮，即可在下面的框中创建标签，如图所示。

我有什么

按下Enter键或加号按钮后我想要的东西

最终

Press().Wait(500)

.TagInput {
    width: 400px;
    height: 32px;
    background: #FAFAFB 0% 0% no-repeat padding-box;
    border-radius: 16px;
    background: url(https://cdn0.iconfinder.com/data/icons/social-    messaging-ui-color-shapes/128/add-circle-blue-512.png) no-repeat scroll 370px 3px;
}

.card {
    width: 435px;
    height: 400px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
}

Answer 1

说实话，我对引导程序不太熟悉。但也许您可以尝试使用Angular解决方案。这可能是一个起点：

CSS

.your-class{
  list-style-type: none;
  display:inline-block;
  position:relative;
  background:#eee;
  padding:5px;
  min-width:50px;
  text-align: center;
  border-radius:30px;
  margin-right:10px;
}

HTML

<ul>
  <li *ngFor="let tag of tags" class="your-class">
    {{tag}} <span class="delete-entry" (click)="deleteTagFromProduct(tag)">x</span>
  </li>
</ul>
<input (change)="addTagToProduct($event)" class="form-control TagInput"/>

打字稿

private tags:string[] = [];

private addTagToProduct( $event ):void {
  this.tags.push($event.target.value);
  $event.target.value = "";
}

private deleteTagFromProduct( tag:string ):void {
  this.tags = this.tags.filter( (a) => a!==tag );
}