如何在文本区域内添加标签？答案

【问题标题】：How to add tags inside Text Area?如何在文本区域内添加标签？
【发布时间】：2016-04-02 01:03:06
【问题描述】：

我正在设计一个 HTML 表单，我想在其中添加城市的不同地点。首先我要从下拉列表中选择城市，然后在该城市下我需要添加不同的地名。

在我的表单中，我想使用类似于在 Gmail 中撰写电子邮件时使用的标签，其中可以添加多个电子邮件。用逗号分隔的任何单词都应该显示为标签。

提交时，每个地名必须在数据库中的“地点”字段下存储为不同的值。

【问题讨论】：

你可以使用
使用 selectize.js 作为标签

标签： javascript php html css

【解决方案1】：

在不重写整个插件的情况下，我将向您介绍此类通常如何工作的基本知识。

框不是文本区域，而是 div。在 div 内部，首先有一个没有边框或背景的输入；它基本上是看不见的。输入输入后，该函数将侦听制表键或逗号字符（仅使用下面的逗号）。如果它获得这些触发器之一，它会获取输入的值，将其包装在一个按钮（或其他一些内联元素，如跨度）中，并将其放在 div 中。最后，它清除输入。我在这里使用了一个按钮，因为您也应该能够删除该元素。

使用 jQuery 只是为了让事情变得更简单。

$('#textarea input').on('keyup', function(e){
   var key = e.which;
   if(key == 188){
      $('<button/>').text($(this).val().slice(0, -1)).insertBefore($(this));
      $(this).val('').focus();
   };
});

$('#textarea').on('click', 'button', function(e){
   e.preventDefault();
  $(this).remove();
   return false;
})

#textarea{
  border:1px solid #eee;
}

#textarea input{
  border:none;
  background:none;
  font-size:1.2em;
  padding:6px;
}

#textarea input:focus{
   outline:none;
}

#textarea button{
   border:1px solid #eee;
   background:#f5f5f5;
  margin:4px;
  font-size:1.2em;
  cursor:pointer;
}

#textarea button:after{
   content:"\d7";
   color:red;
   margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textarea"><input type="text"/></div>

【讨论】：

【解决方案2】：

虽然我个人从来不需要实现标签，但我的建议是搜索互联网以找到与您想要实现的目标相似的东西，并尝试模仿他们的代码并从中学习。

幸运的是，我为您找到了一个可能节省您时间的方法，它使用 JavaScript 在您使用逗号时实际创建标签。

http://sean.is/poppin/tags

源代码似乎在 Git 上可用，并且可以提供您正在寻找的答案，而无需我为您完成这部分！

祝你好运！

【讨论】：

【解决方案3】：

我认为最好使用一些像标记它的插件。 https://github.com/aehlke/tag-it

只需查看演示。

【讨论】：