使用jquery創建標籤像stackoverflow

-2

我想使標籤像堆棧溢出標籤，但問題是1-當我點擊標籤它不起作用2-當我點擊輸入保存客戶端的效果被點擊和3我要發送的標籤，展示列表的陣列使用jquery創建標籤像stackoverflow

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

來源

2017-06-04 Marwa

你不顯示自己的關於3個問題，基本的任何努力，你問的是什麼，我們的代碼了。 –

有很多腳本可以爲你做到這一點。您的主要問題是在每個按鍵事件中初始化一個新陣列 – charlietfl

@CarstenLøvboAndersen我解決了大部分問題，但唯一一個我沒有做的是我想創建要發送的標籤字符串數組，當我點擊保存客戶btn – Marwa

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

來源

2017-06-04 19:35:58 Rick

使用jquery創建標籤像stackoverflow

回答

相關問題