我想为输入数据创建标签。(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html听说他们使用自动完成文本框创建标签，但我不想自动完成)
听到是我的代码
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#textBox").keyup(function() {
$("#message").val($(this).val());
});
});
</script>
</head>
<body>
<div>
TextBox 1 : <input type="textbox" id="textBox"></input>
TextBox 2 : <input type="textarea" id="message"></input>
</div>
</body>
</html>
听它把textbox1的数据反射(reflect)到textbox2。
现在我想要的是:如果用户在textbox1中输入任何数据(单词)，然后输入空格，那么该单词应该转换为textbox2中的标签
最佳答案
首先type=textarea 错误。没有这样的input像那样。您必须使用<textarea>而不是那个。其次，你为什么不使用 contentditable属性？它的工作方式就像文本区域，但可以采用 HTML，所有浏览器都支持，并且您可以在任何 block 元素上使用它!所以更换你的第二个 input与此:
TextBox 2 : <div class="target" contenteditable="true"></div>
然后，在您的代码中，
$("#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/
要将标签添加到数组中，请使用一个名为 tags 的变量外keypress功能:
var tags = [];
然后，在 keypress ，你有这个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函数中做了什么)
关于jquery-ui - 使用 jquery 在文本区域中创建标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18029598/