以逗号分隔的标签的输入字段答案

【问题标题】：Input field for Tags separated by comma以逗号分隔的标签的输入字段
【发布时间】：2020-12-16 19:53:58
【问题描述】：

我正在开发一个允许用户通过标签发布内容的 Web 应用程序，但问题是，如果标签由逗号和文本字段分隔，我将如何在标签周围制作一个漂亮的块值仍然相同，只是用户的视图会有所不同。

例如 YouTube 或 StackOverflow，现在我不需要它来检查数据库或任何东西。

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

类似 Stack Overflow 的做法：

允许字母数字和+-.#（并修剪空格！）
转换为小写
在 focusOut Enter , 上自动创建标签框（添加更多 | 分隔键码）
点击时删除标签框（需确认）

$(function(){ // DOM ready

  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('#tags').on('click', 'span', function() {
    if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
  });

});

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags > span{
  cursor:pointer;
  display:block;
  float:left;
  color:#fff;
  background:#789;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags > span:hover{
  opacity:0.7;
}
#tags > span:after{
 position:absolute;
 content:"×";
 border:1px solid;
 padding:2px 5px;
 margin-left:3px;
 font-size:11px;
}
#tags > input{
  background:#eee;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tags">
  <span>php</span>
  <span>c++</span>
  <span>jquery</span>
  <input type="text" value="" placeholder="Add a tag" />
</div>

【讨论】：

嗯，这并没有真正通过逗号来完成整个单独的标签...感谢您的尝试！反正我已经加了答案。
@fermionoid 添加了逗号 :) 看看
我建议使用内容可编辑的 div .. 我认为它更容易
完美，现在我只需要实现这个！
@fermionoid 这是一个非常好的实现，但它实际上没有 API。如果没有文档遍历，就无法检索标签值。就像我之前说过的，你真的不需要在这里重新发明轮子。

【解决方案2】：

您不一定需要在这里重新发明轮子。已经存在许多用于此目的的库/插件，其中之一是 Guillermo Rauch 的 TextboxList。你可以找到一个演示here。它已经具有自动完成支持和相当广泛的 API，这是任何实现的主要障碍。

最初的实现使用了 MooTools，但是你可以通过 golive here 找到一个 jQuery 版本。

【讨论】：

来吧，你正在扼杀所有的乐趣
@roXon 不要误会我的意思，我赞成你的回答，但这纯粹是视觉的。制作一个可以方便地访问数据的 API 仍然需要一些工作，但为什么要重新发明轮子呢？
@fermionoid 我没有亲自使用过那个，但你也可以试试。我的观点基本上是，当你已经为你完成了编写一堆代码和调试边缘情况时，你真的不需要。
真的，我明白你的意思，我赞成你的回答，我的实现有什么问题：pastecan.com/v/jkO9jLb ?
没关系，我想我找到了实现的答案:)

【解决方案3】：

在 div 中放置文本输入，然后检查按键（例如逗号或空格键），如果它与键匹配，则使用 jQuery 将带有标签详细信息的新跨度附加到 div。

如果需要，我可以提供更多细节或示例，但代码应该相当简单。

【讨论】：

好的，我知道你要去哪里，但你能给我举个例子吗？提前致谢！
@fermionoid：你为什么不先尝试一下？
@Blender，我不太明白 div 将如何影响 textarea，我认为文本区域中不能有单独的样式，我也不太明白后面的javascript，比我平时用js做的更高级。
@fermionoid：用<div> 标签制作一个假文本区域，并使文本框完全没有样式。
@MattG 我还建议使用 contenteditable div .. 你怎么看？

【解决方案4】：

在 select2 列表中使用“标记支持”： https://select2.github.io/examples.html

    $(".js-example-tags").select2({
  tags: true
})

【讨论】：

【解决方案5】：

我想制作一个类似于 Facebook 用于标记人的标签框，但发现可用选项臃肿和/或不做我想要的关键事情：要求标签存在于预设列表中（可以从AJAX 调用。

我从Roko C. Buljan's answer 开始，然后添加了一些重要的东西。

方向键导航
如上所述，需要预设答案
data- 属性，便于为 ajax-post 收集。

Codepen for anyone interested

【讨论】：