javascript - 使用输入创建标签

Question

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

是）我有的

当我按下回车键或按钮加号时我想要什么

最终的

.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;
}

 <div class="card">
     <div class="card-header header">
         <h1> Tags </h1>
     </div>
     <div class="card-body">
         <div class="form-group">
             <input type="text" class="form-control TagInput" placeholder="Tag your product...">
         </div>
     </div>
</div>

标签： javascripthtmlcssangulartwitter-bootstrap

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 );
}