Fiddle

Question

我正在构建一个边界框，在gmail上使用边界框，当你编写一个联系人时，它会出现一个边界框。

另一个例子是YouTube，当你写标签时。

我正在尝试创建一个类似的脚本，但我在这里遇到了一些麻烦。

我想将我的脚本放在输入框中，但问题是，当我使用html标签时，它不会读取我的脚本，例如：

这是我的HTML代码：

<label>Tags</label>
<input type="text"  id="tags" class="tagstype" name="tags" maxlength="230">

我的JavaSript代码

$('#tags').keypress(function(e) {
    if(e.which == 32) {
        var tx = $('#tags').val();
        if (tx) {
            $(this).val(tx+'[X]');
            closer();
        }
    }
});
});

它没有html标签，但是当我使用这种方式放置一些html标签时

$('#tags').keypress(function(e) {
    if(e.which == 32) {
        var tx = $('#tags').val();
        if (tx) {
            $(this).val('<a>'tx+'[X]</a>');
            closer();
        }
    }
});
});

它不显示代码的结果，只显示标记。

我是jQuery的新手，有没有办法显示标签？

Answer 1

您不能将HTML置于input的值内。

要实现您要执行的操作，您需要使用标记插件，例如：http://xoxco.com/projects/code/tagsinput/

还有很多其他人，谷歌jquery tag plugin可以找到它们。

Answer 2

查看：

Fiddle

这完全符合您的要求，虽然需要修改，但我认为开始工作对您有用。

在此我采用了<div>代替<input>并将code绑定到div。我在该div中设置了contentEditable=true，因此在IE中无效（版本<9）。

如果浏览器兼容性存在问题，那么最好使用插件。

如果您输入逗号,分隔tagNames，然后按shift+Enter，则会自动格式化您的代码。我也将[x]修改为close button，这将删除该标记。

您可以在提供任何输入后按shift+enter。

要在实际<form>中使用这些值，我在那里创建了一个hidden输入，需要在JS中进行修改。这就是当标签被格式化时它会将其实际值保存在hidden input中，然后可以在server side script ..

中使用

希望它可以作为一个开始步骤，并让你设计自己的代码。

如果您需要更多帮助，请告知我。干杯： - ）。

如何格式化<input type =“text”/>中的文本以创建像gmail，SO这样的边界框/标记系统

2 个答案:

Fiddle