Question

我试图在我的网络应用程序中为用户提供一个文本区域，在文本区域内他们可以添加单词，当他们点击键盘上的空格按钮时，该单词将成为标记。每个单词本身都没有空格。我想要做的是与Stackoverflow中的Tags部分非常相似。我不需要自动完成或任何这种性质。

当我开始开发这个功能时，我想，我会抓住键盘空间事件，然后单个单词会突出显示，x会出现在结尾处，如果他们点击x，那么该单词将被删除文本区域。任何想法，什么事件sh

if (event.which != 0 && event.charCode != 0)

{

}

Answer 1

我可能会绑定到keyup，然后检查空间，如果是空格，我会在textarea上创建一个div，它会有一个可点击的'X'，就像这样（显然你需要一些css才能让它看起来不错并且您需要在文本区域上方使用高度自动的容器div来附加您的标记而不是正文标记）：

$("#foo" ).bind( "keyup", function() 
{
  if (event.which == 32)
  {
     var thisTagText = $('#foo').val();

     $('body').append('<div class="myTag">' + thisTagText + '<div onclick="removeTag();">X</div></div>'); 
  }
});

Answer 2

我几乎可以肯定我看到了这样的插件。谷歌“jQuery插件”，你会发现它已经为你实现了......

Answer 3

你的答案被切断了吗？

无论如何，使用这样的东西：

HTML：

<div id="tags"></div><input type="text" id="tags-input"/>

JavaScript的：

var tagsInput = $("#tags-input"),
    tags = $("#tags");

tagsInput.keydown(function(e){
    if (e.keyCode == 32) { // when space bar is pressed
        var tag = $("<span>", {html: this.value, class: "tag"});
        var removeTag = $("<span>", {class: "tag-delete"});
        tag.append(removeTag);

        tags.append(tag); // add span to div

        removeTag.click(function(){
           tag.remove(); //delete tag
        });

        this.value = ""; // clear value
    }
});

我会让你为它设计风格。

Jquery如何在文本区域创建标签？

3 个答案: