使用 jquery 创建像 stackoverflow 这样的标签答案

【问题标题】：creating tags like stackoverflow using jquery使用 jquery 创建像 stackoverflow 这样的标签
【发布时间】：2017-06-04 18:41:32
【问题描述】：

我想制作像堆栈溢出标签一样的标签，但问题是 1-当我单击选项卡时它不起作用 2-当我单击输入时单击保存客户端的效果和 3-我想将标签发送为列表数组

<div class="row">
              <div class="form-group">
                <div class="col-md-12 col-sm-12">
                  <label>Address *</label>
                  <div class="target" contenteditable="true"></div>
                    <input type="text" id="clientAdd" name="address" value="" class="form-control required">
                </div>
              </div>
            </div>

<div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn-3d btn-teal btn-xlg btn-block margin-top-30">
                Save Client
              </button>
            </div>
          </div>

这是jq代码

$("#clientAdd").keypress(function (e) {
if (e.which === 9 || e.which === 32 ) {
     $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
        var stringList = [];
        stringList.push(this.value);
        this.value = "";
}

});

这是css代码

.tag {
 color: #3E6D8E;
 background-color: #E0EAF1;
 border-bottom: 1px solid #b3cee1;
 border-right: 1px solid #b3cee1;
 padding: 3px 4px 3px 4px;
 margin: 2px 2px 2px 0;
 text-decoration: none;
 font-size: 90%;
 line-height: 2.4;
 white-space: nowrap;
 }
.tag:hover {
   background-color: #c4dae9;
   border-bottom: 1px solid #c4dae9;
   border-right: 1px solid #c4dae9;
}

【问题讨论】：

这 3 个问题你没有表现出任何你自己的努力，基本你的要求是让我们编码它。
周围有许多脚本可以为您做到这一点。您的主要问题是在每个按键事件中初始化一个新数组
@Carsten Løvbo Andersen 我解决了大部分问题，但我唯一没有解决的问题是我想创建标签字符串数组以在单击保存客户端 btn 时发送

标签： javascript jquery html css arraylist

【解决方案1】：

使用 vanilla.js，它适用于所有浏览器，速度更快且无需库。选择您的元素，添加一个事件监听器，创建一个新元素并附加该元素，您就完成了！

var input = document.getElementById('clientAdd');
var target= document.getElementsByClassName('target')[0];
var button = document.querySelectorAll('button[type="submit"]')[0];
var stringList=[];

input.addEventListener('keypress', function(e){

if (e.which === 9 || e.which === 32 ){
let atag= document.createElement('a');
atag.setAttribute('class','tag');
atag.setAttribute('href','#');
atag.innerHTML=this.value;
stringList.push(this.value);
target.appendChild(atag); 
console.log('your string has been added to the array', stringList);
}
});

button.addEventListener('click', clicked =>{
let atag= document.createElement('a');
atag.setAttribute('class','tag');
atag.setAttribute('href','#');
atag.innerHTML=input.value;
stringList.push(input.value);
target.appendChild(atag); 
console.log('your string has been added to the array', stringList);
});

.tag {
 color: #3E6D8E;
 background-color: #E0EAF1;
 border-bottom: 1px solid #b3cee1;
 border-right: 1px solid #b3cee1;
 padding: 3px 4px 3px 4px;
 margin: 2px 2px 2px 0;
 text-decoration: none;
 font-size: 90%;
 line-height: 2.4;
 white-space: nowrap;
 }
.tag:hover {
   background-color: #c4dae9;
   border-bottom: 1px solid #c4dae9;
   border-right: 1px solid #c4dae9;
}

<div class="row">
              <div class="form-group">
                <div class="col-md-12 col-sm-12">
                  <label>Address *</label>
                  <div class="target" contenteditable="true"></div>
                    <input type="text" id="clientAdd" name="address" value="" class="form-control required">
                </div>
              </div>
            </div>

<div class="row">
            <div class="col-md-12">
              <button type="submit" class="btn btn-3d btn-teal btn-xlg btn-block margin-top-30">
                Save Client
              </button>
            </div>
          </div>

【讨论】：