使用 jquery 在 textarea 中创建标签答案

【问题标题】：creating tags in textarea using jquery使用 jquery 在 textarea 中创建标签
【发布时间】：2013-08-03 05:25:26
【问题描述】：

我想为输入数据创建标签。（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的数据反映到textbox2。

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

【问题讨论】：

@ MESSIAH，好的，我知道我现在将尝试集成到我的代码中
jsfiddle.net/hailwood/u8zj5

标签： jquery-ui jquery jquery-plugins tags

【解决方案1】：

首先type=textarea 是错误。没有这样的input。您必须使用 <textarea> 而不是那个。其次，为什么不使用contentditable 属性？它就像文本区域一样工作，但可以接受 HTML，所有浏览器都支持它，您可以在任何块元素上使用它！所以用这个替换你的第二个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 = "";
    }
});

(Disclaimer) 我使用了 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("<a href='#' class='tag'>" + this.value + "</a>");
    tags.push(this.value); //push the value in array
    this.value = "";
}

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

tags.join("");

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

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

【讨论】：

感谢您的回答，您能否建议将 thous 生成的标签保留在数组中（实际上我想将 thous 生成的标签插入到同一 ID 下的数据库中）
只有标签名还是整个<a/>?
整个生成的标签在同一个 id 中（有些东西看起来像多个 locums 数据引用同一个 id）
@饥饿痛苦非常感谢。

【解决方案2】：

试试这个：

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

JSFIDDLE DEMO

【讨论】：

它和我的代码一样。我想在任何单词后跟空格时获取标签，您可以查看示例（请参阅上面的链接和在现场演示文本框中键入“e”或“f”）