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

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

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

提交时，每个地名必须作为不同的值存储在数据库的feild Places下

---

我认为最好使用一些插件，比如标记它。

---

只需查看演示。

虽然我个人从未实现过标签，但我的建议是浏览互联网，找到与您试图实现的目标类似的东西，并尝试模仿他们的代码并从中学习

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

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

---

祝你好运

在不重写整个插件的情况下，我将向您介绍此类插件的基本工作原理

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

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

$'textarea input'。在'keyup'上，函数E{ var-key=e.which； ifkey==188{ $.text$this.val.slice0，-1.insertBefore$this； $this.val.focus； }; }; $'textarea'。在“单击”、“按钮”上，函数E{ e、 防止违约； $this.remove； 返回false； } 文本区{ 边框：1px实心eee； } 文本区域输入{ 边界：无； 背景：无； 字体大小：1.2米； 填充：6px； } 文本区域输入：焦点{ 大纲：无； } 文本区域按钮{ 边框：1px实心eee； 背景：F5； 保证金：4倍； 字体大小：1.2米； 光标：指针； } 文本区域按钮：之后{ 内容：\d7； 颜色：红色； 左边距：2倍； }

---

您可以将selectize.js用于标记