텍스트 영역에 새 텍스트 추가

Question

http://jsfiddle.net/joevallender/QyqYW/1/을 기반으로 태그 시스템을 작성하고 있지만 텍스트 영역을 입력하여 새 태그를 추가하려고하면 제대로 작동하지만 태그를 클릭하면 이전의 새 텍스트가 제거됩니다.

HTML

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

자바 스크립트

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

귀하의 문제는 전에 textarea에 무슨 그것은 덮어 쓰는 것이 줄

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

입니다.

편집 :

을보십시오 : 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

내가 add and remove multiple tag by onclick to textarea

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

Answer 3

$(this).text(); 

를 참조하여 원래의 질문에 jsfiddle 작업 계속

아보우 (Abowe)는 html에서 DOM으로 oryginaly로 렌더링 된 값만 반환합니다. 텍스트 영역에 입력 한 내용이 아직 없으면 나중에 ('#tags').on('keyup' function() {}); 에 입력하고 입력 한 내용을 저장하여 나중에 텍스트 영역에 포함해야합니다.

Answer 4

솔직히 말해서 태그를 별도의 div 또는 입력에 넣어야한다고 생각합니다. 그들은 어쨌든 DB에 별도로 저장해야합니다.