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

Question

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

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

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

Answer 1

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

该框不是文本区域，它是一个 div。在 div 内部，首先是一个没有边框或背景的输入；它基本上是看不见的。键入输入后，该函数将监听制表键或逗号字符(仅使用下面的逗号)。如果它获得这些触发器之一，它会获取输入的值，将其包装在一个按钮(或其他一些内联元素，如 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>