使用jquery在textarea中创建标签

我想为输入数据创建标签。（ http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html听到他们使用自动完整文本框创建标签，但我不知道想要自动完成一个）

听到的是我的代码

     $(document).ready(function() { $("#textBox").keyup(function() { $("#message").val($(this).val()); }); });    
 TextBox 1 :  TextBox 2 :  
   

听到它反映textbox1到textbox2的数据。

现在我想要的是：如果用户在textbox1中输入任何数据（单词）后跟空格，那么该单词应该转换为textbox2中的标签

Answer 1

首先， type=textarea是错误的 。 没有这样的input 。 你必须使用而不是那个。 其次，为什么不使用contentditable属性？ 它就像一个文本区域，但可以使用HTML，在所有浏览器中都支持，你可以在任何块元素上使用它！ 所以用这个替换你的第二个input ：

 TextBox 2 : 
 

然后，在你的代码中，

 $("#textBox").keypress(function (e) { if (e.which === 32) { $(".target").append("" + this.value + ""); 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 = []; 

然后，在keypress ，你有这个if循环吗？ 将新值推入数组：

 if (e.which === 32) { $(".target").append("" + this.value + ""); tags.push(this.value); //push the value in array this.value = ""; } 

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

 tags.join(""); 

然后，当你下次从DB中检索它们时，你可以用a包装它们（我们在keypress函数中做a什么）

演示： http ： //jsfiddle.net/hungerpain/Wky2Z/1/

Answer 2

试试这个：

 $(document).ready(function () { $("#textBox").keyup(function (e) { if (e.keyCode == 32) { $("#message").val($(this).val()); } if ($(this).val() == '') { $("#message").val(''); } }); }); 

JSFIDDLE DEMO