Question

我想制作像堆栈溢出标签这样的标签，但问题是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;
}

Answer 1

使用所有浏览器都可以使用的vanilla.js，速度更快，无需图书馆。选择你的元素，添加一个事件监听器，创建一个新元素并附加该元素，你就完成了！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: