javascript - 将文本添加到具有特定 ID 的每个标签中

Question

我在我的网站中为三个不同的类别实施了一个标签系统。我为 Twitter 帐户设置了它，所以我有“关键字”、“提及”和“标签”。我需要的是，当用户在text inputfor Mentions中将标签插入到prepend输入文本之前的“@”符号中时。除了“#”符号外，主题标签也是如此。我已经整理了一个演示，展示了我到目前为止所拥有的东西。任何帮助将不胜感激。

JSFIDDLE

<div id="wrapper">
<table>
    <tr>
        <th></th>
        <td id="keyword-filter">
            <h5>Keywords</h5>
            <input type="text"  id="keywordInput">
            <br>
            Include:
            &nbsp;&nbsp;<input type="radio" name="keywordInclude" checked="true">Any
            &nbsp;&nbsp;<input type="radio" name="keywordInclude">All
            <b>Keywords</b>
        </td>

    </tr>

    <tr>
        <th></th>
        <td id="mention-filter">
            <h5>Mentions</h5>
            <input type="text"  id="mentionInput">
            <br>
            Include:
            &nbsp;&nbsp;<input type="radio" name="mentionInclude" checked="true">Any
            &nbsp;&nbsp;<input type="radio" name="mentionInclude">All
            <b>Mentions</b>             
        </td>

    </tr>

    <tr>
        <th></th>
        <td id="tag-filter">
            <h5>Hashtags</h5>
            <input type="text"  id="hashtagInput">  
            <br>
            Include:
            &nbsp;&nbsp;<input type="radio" name="tagsInclude" checked="true">Any
            &nbsp;&nbsp;<input type="radio" name="tagsInclude">All
            <b>Hashtags</b>
        </td>

    </tr>
</table>

Answer 1

根据 tagsInput 插件的文档和源代码，您可以在onAddTag添加标签时使用回调来触发。您可以获取刚刚在 DOM 中创建的标签元素，并在文本前面加上 @。有关工作示例，请参阅更新的jsfiddle。您还需要检查用户是否还没有输入@。

$('#mentionInput').tagsInput({
    'defaultText':'add name',
    'onAddTag':function(tag) {
        var span = $('#mentionInput_tagsinput .tag span').last();
        if (span.text().substring(0, 1) != '@') {
            span.text('@' + span.text());
        }
    }
});