Javascript 如何将html文本框中的一个单词转换为；标签"；用jQuery？

我想设计一个奇特的搜索框。 每次键入一个单词，然后按空格键时，该单词都应转换为“标记”。“标签”的意思是：

您可以在这里看到的标记来自stackoverflow的my profile settings。这里，通过按下“添加”按钮创建标签。但我希望这个词不是通过按下按钮，而是每次按下空格键都能变成标签

你有办法解决我的问题吗

我在谷歌搜索了很长时间，但什么也没找到

谢谢你的帮助

：D

这是一把快速小提琴。不过，我有点讨厌用jQuery处理这样的东西，所以它是用纯javascript编写的。脚本部分如下所示：

var output = document.getElementById('output'),
    input = document.querySelector('input');

    input.onkeyup = function(e){
      if(e.keyCode == 32) { //check for spacebar
        var tag = document.createElement('span');
        tag.className = "tag";
        tag.textContent = input.value.trim();
        input.value = "";
        output.appendChild(tag)
      }
    }

具有一定的健壮性，可以通过一些考虑（范围、多实例等）打包以供重用

首先，标记：

<div id="tags" class="cf"></div>
<input type="text" id="tagname" />

---

如果从头开始重建不是强制要求，那么最好使用一个健壮的插件（有很多插件）。

类似这样的东西：？与其说是一个问题，不如说是一个功能。当你开始编码并遇到障碍时，你就有问题了。可能有数百种方法可以实现这一点。当/如果代码不起作用时，试一下并发布你的代码。你的代码还可以，但问题是它不是那么流畅。如果你仔细观察，每次你按下空格键，空格就会显示出来并被删除。公平点。如果这是一个问题，您需要做的唯一更改是将

input.onkeyup

更改为

input.onkeydown

。更新

$('#tagname').keypress(function(e) {
    var $t = $(e.target),
        tmap = $t.data('tmap') || {},
        n = e.keyCode || e.which,
        val;
    $t.data('tmap', tmap);

    if (n === 32) {
        val = $.trim($t.val());
        if (val !== '' && tmap[val] === undefined) {
            tmap[val] = 1;
            $('#tags').append($('<div>').addClass('tag').html(val));
            $t.val('');
        }
    }
});

$('#tags').on('click', '.tag', function(e) {
    var $t = $(e.target);
    txt = $.trim($t.text());
    $t.remove();
    delete $('#tagname').data('tmap')[txt];
});

#tags {
    width: 100%;
    padding: 10px;
    float: none;
    clear: both;
}

.tag {
    float: left;
    margin: 5px;
    padding: 5px;
    background: #efefef;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}

.tag::after {
    content: '\2612';
    float: right;
    display: block;
    margin: -2px 0 0 10px;
}