javascript - 当用户在写一些文本后按 ","时创建一个特定的标签

Question

我有一个用于分配任务的文本区域，用户可以在其中一次分配多个任务，并用“,”分隔。当用户按下 "," 时，我希望之前编写的任务像标签一样显示。

这就像我们在此站点上发布问题并选择“html”、“jquery”等标签，然后创建一个特定字段和一个十字按钮。

但是这些在搜索后显示，但我希望当用户编写他们的任务并按下时，它就会发生。

<tr>
        <td colspan="2"><textarea placeholder="Current Tasks: Read a book" rows="10" id="task" name="task"></textarea>
                        </td>
                    </tr>

Answer 1

我指的是类似的已回答问题。点击 Tags访问页面

然后，在您的代码中，

$("#textBox").keypress(function (e) {
  if (e.which === 32) {
    $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
    this.value = "";
  }
});

(免责声明)我使用了 SO 标签中的样式，如下所示:

body {
   font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif;
}
.tag {
  color: #3E6D8E;
  background-color: #E0EAF1;
  border-bottom: 1px solid #b3cee1;
  border-right: 1px solid #b3cee1;
  padding: 3px 4px 3px 4px;
  margin: 2px 2px 2px 0;
  text-decoration: none;
  font-size: 90%;
  line-height: 2.4;
  white-space: nowrap;
 }
 .tag:hover {
   background-color: #c4dae9;
   border-bottom: 1px solid #c4dae9;
   border-right: 1px solid #c4dae9;
   text-decoration: none;
  }

演示:http://jsfiddle.net/hungerpain/Wky2Z/

要将标签添加到数组中，请在按键函数外添加一个名为标签的变量:

 var tags = [];

然后，在按键中，您的 if 循环正确吗？将新值插入数组:

if (e.which === 32) {
   $(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
   tags.push(this.value); //push the value in array
   this.value = "";
 }

然后，当您需要将其保存到数据库时，只需加入它们即可:

 tags.join("");

然后，当你下次从数据库中检索它们时，你可以用 a 包装它们(我们在 keypress 函数中所做的)