通过点击文本区域添加和删除多个标签

add and remove multiple tag by onclick to textarea

本文关键字：删除 标签 添加 区域 文本      更新时间：2023-09-26

我有一个表单，它有一个文本区域和数据库中的标签列表（已经查询并显示在文本区域下），我想在文本区域上添加这些标签（用逗号分隔），如果用户点击标签时标签已经在那里，则将其删除。

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

代码如下。CCD_ 1将来自服务器，而CCD_。如果需要，您也可以将数据从服务器加载到selectedTags中，例如编辑现有的标记帖子。如果您这样做了，您就可以将click()函数中的代码重构为自己的函数，这样它也可以在文档就绪的情况下运行。

我包含了一些类切换和调试屏幕，这样你就可以看到发生了什么

HTML

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

编辑这是一个双向的http://jsfiddle.net/joevallender/QyqYW/14/

相关文章：