我寫基於http://jsfiddle.net/joevallender/QyqYW/1/標籤系統，但是當我嘗試通過輸入文本區域添加新標籤，它工作正常，但是當我在任何標籤點擊，以前的新文本將被去除新的文字。上textarea的

HTML

<textarea id="tags"></textarea> 
<div id="tagButtons"></div>

的Javascript

var tags = [ 
    'JavaScript',  
    'jQuery', 
    'HTML5',  
    'CSS3' 
]; 

var selectedTags = []; 

for(var i = 0; i < tags.length; i++) { 
    var el = $('<span>').text(tags[i]); 
    $('#tagButtons').append(el); 
} 

$('#tagButtons span').click(function(){ 
    var val = $(this).text(); 
    var index = selectedTags.indexOf(val); 
    if(index > -1) { 
    var removed = selectedTags.splice(index,1); 
    $(this).removeClass('selected'); 

    } else { 
    selectedTags.push(val); 
    $(this).addClass('selected'); 

    } 
    $('#tags').val(selectedTags.join(', ')); 
});

來源

2012-08-23 noisybuddha

爲什麼PHP標記？ – Leri

你的意思是你想要考慮除''標籤'數組之外的標籤嗎？ –

由於您使用jQuery的，我強烈推薦[選擇]（http://ivaynberg.github.com/select2/#tags）插件，它具有非常好的標籤已經支持，允許從現有代碼或添加新的選擇。 – andyb

您的問題是在這條線

$('#tags').val(selectedTags.join(', '));

它改寫了什麼是在textarea之前。

編輯：

試試： http://jsfiddle.net/QyqYW/92/

var tags = [ 
    'JavaScript',  
    'jQuery', 
    'HTML5',  
    'CSS3', 
    'PHP' 
], 
keys = ""; 

var selectedTags = []; 

for(var i = 0; i < tags.length; i++) { 
    var el = $('<span>').text(tags[i]); 
    $('#tagButtons').append(el); 
} 

//changed click event to "on" event.. 
//it seems that click doesn't bind to dynamically added elements 
$('#tagButtons').on("click" , "span" , function(){ 
    //Checks if you've forgot to type "," and then adds your tag 
    if(keys != ""){ 
      selectedTags.push(keys);         
      $('#debug').prepend($('<div>').html('Added: ' + keys)); 
      var newEl = $('<span class="selected">').text(keys); 
      $('#tagButtons').append(newEl); 
      $('#tags').focus().val(selectedTags.join(', ') + ", ");          
      keys = ""; 
     } 

     var val = $(this).text(); 
     var index = selectedTags.indexOf(val); 
     if(index > -1) { 
      var removed = selectedTags.splice(index,1); 
      $(this).removeClass('selected'); 
      $('#debug').prepend($('<div>').html('Removed: ' + removed)); 
      $('#tags').focus().val(selectedTags.join(', ') + ", "); 
     } else { 
      selectedTags.push(val); 
      $(this).addClass('selected'); 
      $('#debug').prepend($('<div>').html('Added: ' + val)); 
      $('#tags').focus().val(selectedTags.join(', ') + ", ");          
     }              


}); 

//adds tag after you type ",".. 
//if you forgot to, look above the first line in the on event 
$("#tags").keydown(function(evt){        
    if(evt.which == 188){ 
     selectedTags.push(keys);         
     $('#debug').prepend($('<div>').html('Added: ' + keys)); 
     var newEl = $('<span class="selected">').text(keys); 
     $('#tagButtons').append(newEl); 
     $('#tags').val(selectedTags.join(', '));          
     keys = ""; 
    } else if(evt.which ==8){ 
    //for after adding tag you can't use Backspace to delete it. 
    //remove tag from butotns 
     if(keys == ""){ 
     evt.preventDefault(); 
    } else { 
     keys += String.fromCharCode(evt.which).toLowerCase(); 
    } 

});

來源

2012-08-23 14:47:38

'$（「＃標籤」）的好方法。VAL（selectedTags.join（「」））;'用於添加標籤時，它的用戶點擊 – noisybuddha

我知道，當你寫在'textarea'一些標籤並點擊任何標籤按鈕，此行得到執行，更換所有東西都在'textarea'與'selectedTags.join'（'，'）'的結果，這意味着刪除您輸入的內容。 –

非常感謝你 – noisybuddha