在textarea上添加新文本

Question

我正在編寫一個基於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(', '));
});
​

Answer 1

你的問題就在這一行

$('#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();
     }

});

Answer 2

我繼續在你的原始問題上工作jsfiddle 通過onclick添加和刪除多個標簽到textarea

見http://jsfiddle.net/joevallender/QyqYW/14/

Answer 3

$(this).text();

Abowe，只返回從html渲染到oryginaly的值。 無論你輸入textarea的是什么，你都必須掛鈎('#tags').on('keyup' function () {}); 並存儲輸入的內容，以便以后將其包含在textarea中。

Answer 4

說實話，我認為你應該把標簽分成單獨的div或輸入。 無論如何，它們應該單獨存儲在數據庫中。