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

Question

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

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

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

Answer 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>

Answer 2

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

只需检查演示即可。