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(){&nbsp; var Buttontext = $(this).text();&nbsp; $('#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>