使用jQuery在textarea中创建标签 [英] creating tags in textarea using jquery
问题描述
我想为输入数据创建标签.( http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html 听到他们使用自动完成文本框创建标签,但我不想自动完成一个)
i want to create tags for input data.(http://textextjs.com/manual/examples/ajax-with-filter-tags-and-autocomplete.html hear they creating tags using auto complete text box, but i don't want auto complete one)
听到是我的代码
<!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的数据反映到textbox2.
hear it reflect data of textbox1 to textbox2.
现在我想要的是:如果用户在textbox1中输入任何数据(单词),然后输入空格,则该单词应转换为textbox2中的标签
now what i want is : if user enter any data(words) in textbox1 followed by space then that word should convert into tags in textbox2
推荐答案
首先type=textarea
是错误.没有这样的input
.您必须使用<textarea>
代替.其次,为什么不使用contentditable
属性?它的工作方式就像一个文本区域,但可以采用HTML,并且在所有浏览器中都受支持,并且您可以在任何block元素上使用它!因此,将第二个input
替换为:
First of all type=textarea
is wrong. There's no such input
like that. You must be using <textarea>
instead of that. Secondly, why dont you use contentditable
attribute? It works just like a text area but can take HTML, is supported in all browsers, and you can use it on any block element! So replace your second input
with this:
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标签的样式,如下所示:
(Disclaimer) I used the styles from SO's tags, like this :
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
的变量:
To add the tags to an array, have a variable called tags
outside the keypress
function :
var tags = [];
然后,在keypress
中,您有这个if
循环正确吗?将新值推入数组:
Then, in the keypress
, you've got this if
loop right? Push the new value into the array :
if (e.which === 32) {
$(".target").append("<a href='#' class='tag'>" + this.value + "</a>");
tags.push(this.value); //push the value in array
this.value = "";
}
然后,当您需要将其保存到数据库时,只需加入他们:
Then, when you need to save it to DB, just join them :
tags.join("");
然后,当您下次从数据库中检索它们时,可以用a
包裹它们(我们在keypress
函数中所做的事情)
Then later, when you to retrieve them from DB next time, you could wrap those with the a
(what we did in the keypress
function)
演示: http://jsfiddle.net/hungerpain/Wky2Z/1/
这篇关于使用jQuery在textarea中创建标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!