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

Question

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

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

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

Answer 1

如果不重写整个插件，我只会告诉你这类通常如何工作的基础知识。

这个盒子不是textarea，它是一个div。在div内部，首先是没有边框或背景的输入;它基本上是看不见的。在键入输入后，该函数将侦听tab键或逗号字符（仅使用下面的逗号）。如果它获得其中一个触发器，它将获取输入的值，将其包装在一个按钮（或其他内联元素，如span）中，并将其预先包含在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>

Answer 2

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

只需查看演示。

Answer 3

虽然我个人从未必须实施标签，但我的建议是搜索互联网以找到类似于您想要实现的内容，并尝试模仿他们的代码并从中学习。

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

http://sean.is/poppin/tags

源代码似乎可以在Git上找到，并且可能会提供您正在寻找的答案，而我无需为您执行此部分操作！

祝你好运！