Jquery ui 使用jquery在textarea中创建标记_Jquery Ui_Jquery_Jquery Plugins_Tags

Jquery ui 使用jquery在textarea中创建标记

jquery-ui jquery jquery-plugins tags

Jquery ui 使用jquery在textarea中创建标记,jquery-ui,jquery,jquery-plugins,tags,Jquery Ui,Jquery,Jquery Plugins,Tags,我想为输入数据创建标记。（听说他们使用自动完成文本框创建标记，但我不想自动完成）这是我的密码 <!DOCTYPE html> <html> <head> <script src="jquery.min.js"></script> <script> $(document).ready(function() { $("#textBox").keyup(function() { $("#messag

我想为输入数据创建标记。（听说他们使用自动完成文本框创建标记，但我不想自动完成）

这是我的密码

<!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>


$（文档）.ready（函数（）{
$（“#文本框”）.keyup（函数（）{
$（“#message”）.val（$（this.val（））；
});
});
文本框1：
文本框2：

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

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

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

首先

type=textarea

是错误的。没有这样的

输入。您必须使用
来代替它。其次，为什么不使用contentditable
属性？它就像一个文本区域，但可以接受HTML，在所有浏览器中都受支持，并且您可以在任何块元素上使用它！因此，将第二个输入替换为以下内容：
TextBox 2 : <div class="target" contenteditable="true"></div>

演示：
要将标签添加到数组中，请在按键
功能外设置一个名为标签
的变量：
var tags = [];

然后，在按键中
，如果
循环正确，您就得到了这个？将新值推送到数组中：
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中检索它们时，您可以使用a
（我们在keypress
函数中所做的操作）将它们包装起来
演示：
它的工作原理与我的代码相同。当任何单词后跟空格时，我想得到标签，你们可以看到示例（见上面的链接，并在实时演示文本框中键入“e”或“f”）@MESSIAH，好的，我有了想法，我现在将尝试在我的代码中集成感谢你们的回答，你们能给出建议，将生成的数千个标签保留在数组中吗（实际上我想在同一个id下向数据库中插入一千个生成的标记）只有标记名或整个？整个生成的标记在同一个id中（有些东西看起来像引用同一id的多个Looms数据）@hungerpain非常感谢。
var tags = [];

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("");