使用jQuery在文本区域中创建标签

Question

使用jQuery在文本区域中创建标签

3

我希望为输入数据创建标签。(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>

听起来它反映了文本框1的数据到文本框2。

现在我想要的是：如果用户在文本框1中输入任何数据（单词）后跟一个空格，那么该单词应在文本框2中转换为标签。

- Rajesh Hatwar

@ MESSIAH，好的，我有一个想法，现在我会尝试将其集成到我的代码中。 - Rajesh Hatwar

http://jsfiddle.net/hailwood/u8zj5/ - HIRA THAKUR

2个回答

1

试一下：

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

JSFIDDLE DEMO

（注：JSFIDDLE DEMO）

- Dhaval Bharadva

它的工作方式与我的代码相同。我想在任何单词后跟空格时获取标签，您可以查看示例（请参见上面的链接，在实时演示文本框中键入“e”或“f”）。 - Rajesh Hatwar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- krishwader · Accepted Answer

首先，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 = "";
    }
});

（免责声明）我使用了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("");

然后，当您下次从数据库中检索它们时，您可以使用a将它们包装起来（就像我们在keypress函数中所做的那样）。

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