使用输入创建标签

Question

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

我有什么

当我按下输入键或按钮时我想要什么

最终

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

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

Answer 1

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