在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 add and remove multiple tag by onclick to textarea

请参阅http://jsfiddle.net/joevallender/QyqYW/14/

Answer 3

$(this).text();

Abowe，只返回从html渲染到oryginaly的值。无论你输入textarea的是什么，你还不得不挂钩('#tags').on('keyup' function () {}); 并存储输入的内容，以便以后将其包含在textarea中。

Answer 4

老实说，我认为您应该将标签放入单独的div或输入中。无论如何，它们应该分别存储在数据库中。