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

回答

相关问题