通过onclick添加和删除多个标签到textarea [英] add and remove multiple tag by onclick to textarea

问题描述

我有一个带有textarea的表单和来自数据库的标签列表（已经在textarea下查询和显示），并希望在textarea上添加这些标签（用逗号分隔），如果用户点击后标签已经存在则删除他们。

解决方案

我想我知道你的意思，请看看这个小提琴
http://jsfiddle.net/joevallender/QyqYW/1/

代码如下。 标签将来自服务器， selectedTags 是当前选择的托管数组。如果需要编辑现有标记的帖子，则可以将数据从服务器加载到 selectedTags 中。如果你这样做了，你可以将 click（）函数中的代码重构为它自己的函数，以便它也可以在文档上运行。

我已经包含了一些类切换和一个调试屏幕，所以您可以看到发生了什么。

HTML

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

和JavaScript

  var tags = [
'JavaScript'，
'jQuery'，
'HTML5'，
'CSS3'
]; 
 
 var selectedTags = []; （var i = 0; i< tags.length; i ++）{
 var el = $（'< span>）。text（tags [i]）; 
 
。 
 $（'＃tagButtons'）。append（el）; 
 
 $ b $（'＃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 '）; 
 $（'＃debug'）。prepend（$（'< div>）。html（'Removed：'+ removed））; 
} else {
 selectedTags .push（val）; 
 $（this）.addClass（'selected'）; 
 $（'＃debug'）。prepend（$（'< div>）。html（'Added （'，'））; 
}）; 
} 
 $ 
  

编辑这是一个可以在两个方向上工作的方法 http://jsfiddle.net/joevallender/QyqYW/14/

I have a form with a textarea and list of tags from database( already queried and displayed under the textarea ) and want to add these tags (seperated by comma) on textarea and remove if the tag is already there as user click on them.

解决方案

I think I know what you mean, please have a look at this fiddle http://jsfiddle.net/joevallender/QyqYW/1/

The code is below. tags would come from the server and selectedTags is the managed array of current selections. you could load data from the server into selectedTags too if necessary, if for instance editing an existing tagged post. If you did this, you'd refactor the code in the click() function out to its own function so it could be run on document ready too.

I've included some class toggling and a debug screen so you can see what is going on.

HTML

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

and 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');
    $('#debug').prepend($('<div>').html('Removed: ' + removed));
  } else {
    selectedTags.push(val);
    $(this).addClass('selected');
    $('#debug').prepend($('<div>').html('Added: ' + val));
  }
  $('#tags').val(selectedTags.join(', '));
});

EDIT Here is one that works in both directions http://jsfiddle.net/joevallender/QyqYW/14/

这篇关于通过onclick添加和删除多个标签到textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！