Question

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

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());
        }
    }
});

使用特定ID将文本添加到每个标记中

1 个答案: