如何格式化< input type =" text">内的文字？创建一个像gmail，SO这样的边界框/标记系统 [英] How can I format the text inside <input type="text"> to create a bounding box/ tag system like gmail, SO

问题描述

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

I'm building a bounding box, bounding boxes are used on gmail, when you write a contact, it appears a bounding box.

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

Another example is YouTube, when you write tags.

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

I'm trying to create a similar script, but I'm having a little trouble here.

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

I want to put my script inside a input box, but the problem is that, when i use html tags, it doesnt read my script, example:

这里我的HTML代码：

Here my HTML code:

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

我的JavaSript代码

And my JavaSript code

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

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

It's working without html tags, but when i put some html tags, using this way

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

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

It doesn't show the result of the code, it only shows the tags.

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

I'm new at jQuery, is there any way to show the tags?

推荐答案

看看：

小提琴

Have a Look at:

Fiddle

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

This Does Exactly What You want, Though Modifications are needed I thought it will be useful for you to start your work.

在这里我采用了< div> 而不是< input> 并将代码绑定到 div 。
我在div中设置 contentEditable = true 所以它在IE中不起作用（版本< 9）。

In this I've taken a <div> instead of <input> and binded your code to that div. I've set contentEditable=true inside that div so it'll not work in IE(version<9).

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

If Browser Compatibility is an issue, then you better use plugin.

如果输入逗号<$> c $ c>，分开 tagNames 然后按 shift + Enter 它会自动显示格式化您的标签。我也将 [x] 修改为关闭按钮，这将删除该标签。

In that fiddle if you enter comma , separated tagNames and then press shift+Enter it'll automatically format your tags. also I've modified your [x] to close button which will delete that tag.

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

You may press shift+enter after supplying any input.

使用实际< form> 中的这些值我在那里创建了一个隐藏的输入，需要在<$ c中进行修改$ c> JS
那时格式化标签然后它会将实际值保存在隐藏输入中，然后可以用于服务器端脚本 ..

To use these values in actual <form> I've created a hidden input there, which needs modification in JS
That is when Tags are formatted then it'll save their actual values in that hidden input which then can be used in server side script..

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

Hope it'll serve as an starting step, and will let you design your own code.

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

Inform me if you need more assistance. Cheers :-).

这篇关于如何格式化&lt; input type =&quot; text&quot;&gt;内的文字？创建一个像gmail，SO这样的边界框/标记系统的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！