在使用引导标签输入将其转换为标签之前处理标签答案

【问题标题】：process tag before converting it into tag using bootstrap tags input在使用引导标签输入将其转换为标签之前处理标签
【发布时间】：2016-07-16 13:25:57
【问题描述】：

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

有没有办法在转换成标签之前处理文本？

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

谢谢

【问题讨论】：

看itemValue和itemText——可以是回调bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples

标签： javascript jquery html twitter-bootstrap bootstrap-tags-input

【解决方案1】：

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

【讨论】：

谢谢伙计...正是我正在寻找...这是我在您的帮助下创建的工作小提琴..jsfiddle.net/qr7uumbb/10
这是我的荣幸:)

【解决方案2】：

引导标签输入在转换为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>

【讨论】：

【解决方案3】：

如果您的输入 id 是“标签输入”，您所要做的就是使用库本身提供的 beforeItemAddcallback，如下所示：

$('#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 repo 中的这种情况下this code 清楚地说明了如何使用此选项。

【讨论】：