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添加的值应该用逗号等分隔符分隔。不过，重要的是还可以添加重复的值。假设所有按钮都被再次单击，但第二个按钮被单击两次，文本字段应显示：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>