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

Question

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

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

任何帮助都会得到帮助。

谢谢

Answer 1

Bootstrap 标签有beforeItemAdd事件，该事件在添加项目之前触发。引导标签

$('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 2

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

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

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

它会在那里：

<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 3

如果您的输入 id 是“标签输入”，您所要做的就是使用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则将通过。

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

此外，在这种情况下很明显，文档没有说明如何取消事件。在这种情况下，它很简单，只需检查代码本身。在这种情况下，插件 github repo 中的这段代码清楚地说明了如何使用此选项。