Question

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

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

任何帮助都会得到满足。

由于

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

Answer 2

Bootstrap标签输入在转换为hidden之前有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是“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 repo中的这种情况this code使得它非常清楚如何使用此选项。

Answer 4

该解决方案如何？首先调用默认的引导程序标签输入功能，例如

$('#input').tagsinput();

然后您可以像这样处理标签

$('#input').on('beforeItemAdd', function(event) {
       let item = event.item;
       let arr = $("#input").val(); //all the previous data like One,Two,Three...
       let array = arr.split(',');
       if(array.includes(item)){
         event.cancel = true;
       }else{
         event.cancel = false;
       }
 });

这是使用复制和粘贴添加标签的奖励代码

Example:-
One
Two
Three
Four Five

将创建四个标签“一个”，“两个”，“三个”，“四个五个”。注意：这里的定界符是换行符而不是空格。

$("#input").prev().children('input').on('paste',function(e){
          e.preventDefault();
          let pastedData = e.originalEvent.clipboardData.getData('text');
          pastedData = pastedData.split('\n');
          pastedData.forEach((item)=>{
            $("#input").tagsinput('add', item);
          });
        });

使用bootstrap标记输入

4 个答案: