Question

我有一个textarea用于分配一个任务，用户可以使用“，”单独分配多个任务。当用户按","时，我希望先前编写的任务显示为标签。

就像我们在这个网站上发布问题并选择像“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/

要将标记添加到数组，请在keypress函数外部使用名为tags的变量：

 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 = "";
 }

然后，当您需要将其保存到DB时，只需加入它们：

 tags.join("");

然后，当你下次从DB中检索它们时，你可以用a来包装它们（我们在按键功能中做了什么）

Answer 2

试试这个

参考http://xoxco.com/projects/code/tagsinput/

将这些文件包含在<head>部分

中

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript">
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js" type="text/javascript">
<link href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css" type="text/css" rel="stylesheet">

HTML

<p><label>Text:</label>
<input id="tags_1" type="text" class="tags" value="foo,bar,baz,roffle" /></p>

脚本

$(function() {
$('#tags_1').tagsInput({width:'auto'});
});

DEMO

当用户按下＆＃34;，＆＃34;时创建一个特定的标签。写完一些文字后

2 个答案: