在使用 bootstrap 标签输入将其转换为标签之前处理标签

Question

我在我的站点中使用 bootstrap 标签输入。基本上我想做的是，要求用户在文本字段中键入 urls，现在如果文本有效 url 则仅将其转换为标签，否则不要。

有什么方法可以在转换为标签之前对文本进行处理吗？

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

Bootstrap 标签输入在转换为 tags 之前有一个 hidden 输入，您可以通过以下代码找到它：

$(".bootstrap-tagsinput input[type="text"]").keyup(function(){
// do your validation
});

您可以通过在您的页面中获取 inspect element 来查看它。按 enter button 后它将转换为 tags 您可以进行验证，直到它位于隐藏输入上。

它将在那里：

<div class="bootstrap-tagsinput">
<span class="tag label label-info">Test<span data-role="remove"></span></span> 
<input type="text" style="width: 7em;" size="1"> // here is!
</div>

Answer 2

Bootstrap 标签有 beforeItemAdd 事件，它在添加项目之前触发。 Bootstrap tags

$('input').on('beforeItemAdd', function(event) {
    /* Validate url */
    if (/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(event.item)) {
        event.cancel = false;
    } else {
        event.cancel = true;
    }
});

Answer 3

如果您的输入 ID 是 "tag-input"，您所要做的就是使用库本身提供的 beforeItemAdd 回调，如下所示：

$('#tag-input').on('beforeItemAdd', function(event) {
        var tag = event.item;

        if(true){ //if tag is not a url or process other text conditions.
          event.cancel = true
        }
});

如果您不将 event.cancel 设置为 false，add 将通过。

您可以查看有关此方法的文档here。

此外，在这种情况下很明显文档没有说明如何取消事件。在这种情况下，只需检查代码本身就足够简单了。我在插件 github 回购中的这种情况 this code 非常清楚如何使用此选项。

在使用 bootstrap 标签输入将其转换为标签之前处理标签

process tag before converting it into tag using bootstrap tags input

javascript

jquery

html

twitter-bootstrap

bootstrap-tags-input