JS jQuery用多个按钮用逗号分隔的值填充输入文本字段

Question

进入以下简单文本输入。。。

<input id="target" type="text" name="color" value="" placeholder="Enter tags">

数据应该通过一些独立的按钮添加吗，比如：

<button onClick="AddTag('target', 'blue');">blue</button>
<button onClick="AddTag('target', 'yellow');">yellow</button>
<button onClick="AddTag('target', 'green');">green</button>
<script>
function AddTag(target_element, value){
// ??
}
</script>

按下所有按钮后，文本字段应具有以下值：

blue,yellow,green

添加的值应该用逗号之类的分隔符分隔。

不过，重要的是，也可以添加双重值。假设所有按钮都被再次点击，但第二个按钮被点击了2次，文本字段应该显示：

blue,yellow,yellow,green

我知道有一些脚本，比如selectize.js和select2，但它们并不能完全满足我的需求，因为它们并不能正确地接受重复应用的值，而且据我所知，它们还允许只从表单元素中选择标记。但我需要它们能够从页面上某个地方的独立按钮添加，就像上面的例子一样。

我希望有人能帮我写一个简单的函数。

编辑：它还应该与免费键入的标签兼容。

Answer 1

由于jQuery标签在那里，所以您可以轻松地执行：

$('button').click(function(){
var Buttontext = $(this).text();
$('#target').val((($('#target').val() !=='') ? $('#target').val()+','+Buttontext : Buttontext));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="target" type="text" name="color" value="" placeholder="Enter tags">
<button>blue</button>
<button>yellow</button>
<button>green</button>